diff --git a/src/App.tsx b/src/App.tsx
index 94b09fe..2a895a9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -60,31 +60,31 @@ const App = () => {
             <Route path="/s/:page1" element={<Setting />} />
           </Route>
 
-          <Route path="/process-step-one/:accountId/:transactionId" element={
+          <Route path="/setup-transaction/:accountId/:transactionId" element={
             <ProtectedRoute>
               <ProcessStepOne />
             </ProtectedRoute>
           } />
 
-          <Route path="/process-step-one/:accountId/:transactionId/:signType" element={
+          <Route path="/setup-transaction/:accountId/:transactionId/:signType" element={
             <ProtectedRoute>
               <ProcessStepOne />
             </ProtectedRoute>
           } />
 
-          <Route path="/process-step-one/:accountId/template/:templateId" element={
+          <Route path="/setup-transaction/:accountId/template/:templateId" element={
             <ProtectedRoute>
               <ProcessStepOne />
             </ProtectedRoute>
           } />
 
-          <Route path="/process-step-two/:accountId/template/:templateId" element={
+          <Route path="/review-and-tag/:accountId/template/:templateId" element={
             <ProtectedRoute>
               <ProcessStepTwo />
             </ProtectedRoute>
           } />
 
-          <Route path="/process-step-two/:accountId/:transactionId" element={
+          <Route path="/review-and-tag/:accountId/:transactionId" element={
             <ProtectedRoute>
               <ProcessStepTwo />
             </ProtectedRoute>
diff --git a/src/SigningOrderDiagram .tsx b/src/SigningOrderDiagram .tsx
index a0839ad..bcce4e7 100644
--- a/src/SigningOrderDiagram .tsx	
+++ b/src/SigningOrderDiagram .tsx	
@@ -97,7 +97,7 @@ const SigningOrderDiagram : React.FC<Signer[]> = (signers) => {
                                         if (signer.completed) {
                                             bgColor = "bg-green-500";
                                             icon = <FaCheck className="text-green-600" />;
-                                        } else if (order === currentProcessingOrder) {
+                                        } else if (order == currentProcessingOrder) {
                                             bgColor = "bg-yellow-500";
                                             icon = <FaClock className="text-yellow-800" />;
                                         } else {
@@ -111,7 +111,7 @@ const SigningOrderDiagram : React.FC<Signer[]> = (signers) => {
                                                     className={`w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-semibold ${bgColor}`}
                                                     title={signer?.name}
                                                 >
-                                                    {(signer?.name !== '' || signer?.roleName) ? getInitials(signer?.name || signer?.roleName) : ""}
+                                                    {(signer?.name != '' || signer?.roleName) ? getInitials(signer?.name || signer?.roleName) : ""}
                                                     <span className="absolute bottom-[12px] right-[-12px] p-1 rounded-full bg-white shadow">
                                                         {icon}
                                                     </span>
diff --git a/src/components/CommonNav.tsx b/src/components/CommonNav.tsx
index e5834a5..c75692d 100644
--- a/src/components/CommonNav.tsx
+++ b/src/components/CommonNav.tsx
@@ -87,7 +87,7 @@ const CommonNav: React.FC<AccountNavProps> = ({
   }
 
   useEffect(() => {
-    if (initial !== "") return
+    if (initial != "") return
     console.log(userDetailsAsync, 'line 89')
     let initialN = (userDetailsAsync.firstName && userDetailsAsync.firstName[0])
     initialN = initialN + "" + (userDetailsAsync.lastName && userDetailsAsync.lastName[0])
@@ -121,7 +121,7 @@ const CommonNav: React.FC<AccountNavProps> = ({
     if (!accountsOpen) {
       setLoadingAccounts(true);
 
-      if (accounts.length === 0 || hasModalBeenClosed) {
+      if (accounts.length == 0 || hasModalBeenClosed) {
         await getAccountDetails();
         setHasModalBeenClosed(false);
       }
@@ -278,7 +278,7 @@ const CommonNav: React.FC<AccountNavProps> = ({
 
   // Special case: if first segment is 's' and next is 'settings', remove 's'
   const pathnames =
-    rawPathnames[0] === "s" && rawPathnames[1] === "settings"
+    rawPathnames[0] == "s" && rawPathnames[1] == "settings"
       ? rawPathnames.slice(1)
       : rawPathnames;
 
@@ -298,7 +298,7 @@ const CommonNav: React.FC<AccountNavProps> = ({
   const accIndex = pathnames.indexOf("accounts");
   const txnIndex = pathnames.indexOf("transactions");
 
-  if (accIndex !== -1 && txnIndex !== -1 && txnIndex > accIndex) {
+  if (accIndex != -1 && txnIndex != -1 && txnIndex > accIndex) {
     // keep only "transactions" and everything after it
     filteredPathnames = pathnames.slice(txnIndex);
   }
@@ -336,13 +336,13 @@ const CommonNav: React.FC<AccountNavProps> = ({
 
           {/* Breadcrumb Navigation */}
           <nav className="text-md font-medium text-gray-800 capitalize flex items-center flex-wrap">
-            {filteredPathnames.length === 0 ? (
+            {filteredPathnames.length == 0 ? (
               <span className="hidden sm:block text-sm ml-4">Welcome <span className='text-white ml-1 bg-[#34BEFF] px-2.5 py-1 rounded-2xl'>{user.firstName ? user.firstName : user.lastName}!</span></span>
             ) : (
               filteredPathnames.map((segment, index) => {
                 const label = labelMap[segment] || formatSegment(segment);
                 const to = "/" + filteredPathnames.slice(0, index + 1).join("/");
-                const isLast = index === filteredPathnames.length - 1;
+                const isLast = index == filteredPathnames.length - 1;
 
                 return (
                   <span key={to} className="flex items-center">
@@ -485,7 +485,7 @@ const CommonNav: React.FC<AccountNavProps> = ({
                                     <div className="flex-1 min-w-0">
                                       <div className="flex items-center space-x-2">
                                         <span className="font-medium text-gray-900 text-sm">{account.accountName}</span>
-                                        {account.accountId === activeAccountId && (
+                                        {account.accountId == activeAccountId && (
                                           <FaCheck className="text-green-600 text-xs" />
                                         )}
                                       </div>
diff --git a/src/components/accounts/Account.tsx b/src/components/accounts/Account.tsx
index acd414a..199a8aa 100644
--- a/src/components/accounts/Account.tsx
+++ b/src/components/accounts/Account.tsx
@@ -112,7 +112,7 @@ const Account = () => {
     // Listen for sessionStorage changes
     useEffect(() => {
         const handleStorageChange = (e: StorageEvent) => {
-            if (e.key === 'activeAccountId') {
+            if (e.key == 'activeAccountId') {
                 const newActiveAccountId = e.newValue ? JSON.parse(e.newValue) : null;
                 setActiveAccountId(newActiveAccountId);
             }
@@ -123,7 +123,7 @@ const Account = () => {
 
         // Custom event listener for same-tab changes
         const handleCustomStorageChange = (e: CustomEvent) => {
-            if (e.detail.key === 'activeAccountId') {
+            if (e.detail.key == 'activeAccountId') {
                 setActiveAccountId(e.detail.newValue);
             }
         };
diff --git a/src/components/accounts/AccountNav.tsx b/src/components/accounts/AccountNav.tsx
index acf5f85..8665970 100644
--- a/src/components/accounts/AccountNav.tsx
+++ b/src/components/accounts/AccountNav.tsx
@@ -89,7 +89,7 @@ const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transaction
     if (!accountsOpen) {
       setLoadingAccounts(true);
 
-      if (accounts.length === 0 || hasModalBeenClosed) {
+      if (accounts.length == 0 || hasModalBeenClosed) {
         await getAccountDetails();
         setHasModalBeenClosed(false);
       }
@@ -187,7 +187,7 @@ const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transaction
 
   // Special case: if first segment is 's' and next is 'settings', remove 's'
   const pathnames =
-    rawPathnames[0] === "s" && rawPathnames[1] === "settings"
+    rawPathnames[0] == "s" && rawPathnames[1] == "settings"
       ? rawPathnames.slice(1)
       : rawPathnames;
 
@@ -256,13 +256,13 @@ const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transaction
   return (
     <header className="w-full px-6 py-2 flex justify-between items-center bg-white border-b rounded-sm border-gray-200">
       <nav className="text-md font-medium text-gray-800 capitalize flex items-center flex-wrap">
-        {pathnames.length === 0 ? (
+        {pathnames.length == 0 ? (
           <span className="text-gray-900 font-semibold">Dashboard</span>
         ) : (
           pathnames.map((segment, index) => {
             const label = labelMap[segment] || formatSegment(segment);
             const to = "/" + pathnames.slice(0, index + 1).join("/");
-            const isLast = index === pathnames.length - 1;
+            const isLast = index == pathnames.length - 1;
 
             return (
               <span key={to} className="flex items-center">
@@ -361,7 +361,7 @@ const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transaction
                                   <div className="flex-1 min-w-0">
                                     <div className="flex items-center space-x-2">
                                       <span className="font-medium text-gray-900 text-sm">{account.accountName}</span>
-                                      {account.accountId === activeAccountId && (
+                                      {account.accountId == activeAccountId && (
                                         <FaCheck className="text-green-600 text-xs" />
                                       )}
                                     </div>
diff --git a/src/components/accounts/Accounts.tsx b/src/components/accounts/Accounts.tsx
index 0eaf64f..08e23ea 100644
--- a/src/components/accounts/Accounts.tsx
+++ b/src/components/accounts/Accounts.tsx
@@ -20,11 +20,11 @@ const getStatusLabel = (
   status: AccountStatus,
   role: UserRole
 ): { text: string; color: string } => {
-  if (status === AccountStatus.ACTIVE && role !== UserRole.OWNER)
+  if (status == AccountStatus.ACTIVE && role != UserRole.OWNER)
     return { text: "Accepted", color: "text-green-600 bg-green-100" };
-  if (status === AccountStatus.REJECTED)
+  if (status == AccountStatus.REJECTED)
     return { text: "Rejected", color: "text-red-600 bg-red-100" };
-  if (status === AccountStatus.INVITED)
+  if (status == AccountStatus.INVITED)
     return { text: "Pending", color: "text-yellow-600 bg-yellow-100" };
   return { text: "Active", color: "text-blue-600 bg-blue-100" };
 };
@@ -83,13 +83,13 @@ const Accounts = () => {
   };
 
   const handleMenuToggle = (accountId: string) => {
-    setOpenMenuId(openMenuId === accountId ? null : accountId);
+    setOpenMenuId(openMenuId == accountId ? null : accountId);
   };
 
   const handleAction = async (accountId: string, action: 'accept' | 'reject') => {
     try {
       let response = await api.post(`/api/v1/accounts/${accountId}/accept/invite`)
-      if (response.data.status === 202) {
+      if (response.data.status == 202) {
         toast.success("Login Successful", {
           position: "top-center",
           autoClose: 5000,
@@ -171,7 +171,7 @@ const Accounts = () => {
                       </button>
 
                       {/* Dropdown menu */}
-                      {openMenuId === account.accountId && (
+                      {openMenuId == account.accountId && (
                         <div
                           className="absolute right-13 top-6  mt-1  w-18 bg-white border text-[13px] font-bold border-gray-300 rounded-md shadow-lg z-10"
                           onClick={(e) => e.stopPropagation()} // prevent row click closing
diff --git a/src/components/accounts/TransactionDataTable.tsx b/src/components/accounts/TransactionDataTable.tsx
index 09cf9b1..a673d58 100644
--- a/src/components/accounts/TransactionDataTable.tsx
+++ b/src/components/accounts/TransactionDataTable.tsx
@@ -90,7 +90,7 @@ const TransactionDataTable = ({ activeAccountId }) => {
     return (
         <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden p-5">
             {/* Table Header */}
-            {location.pathname !== "/transactions" && (
+            {location.pathname != "/transactions" && (
                 <div className="flex justify-between items-center pb-3">
                     <h2 className="text-lg font-semibold text-gray-800">Recent Transactions</h2>
                     <span
@@ -104,7 +104,7 @@ const TransactionDataTable = ({ activeAccountId }) => {
 
             {/* Table */}
             <div
-                className={`overflow-auto rounded-lg ${location.pathname === "/transactions"
+                className={`overflow-auto rounded-lg ${location.pathname == "/transactions"
                         ? "min-h-[70vh] max-h-[70vh]"
                         : "min-h-[30vh] max-h-[50vh]"
                     }`}
@@ -134,7 +134,7 @@ const TransactionDataTable = ({ activeAccountId }) => {
                             {transactions.map((tx, idx) => (
                                 <tr
                                     key={tx.id}
-                                    className={`${idx % 2 !== 0 ? "bg-gray-50" : "bg-white"} border-b border-gray-300 hover:bg-gray-100 transition`}
+                                    className={`${idx % 2 != 0 ? "bg-gray-50" : "bg-white"} border-b border-gray-300 hover:bg-gray-100 transition`}
                                 >
                                     <td
                                         onClick={() => navigate(`/accounts/${activeAccountId}/transactions/${tx.id}`)}
@@ -205,8 +205,8 @@ const TransactionDataTable = ({ activeAccountId }) => {
 
                         <button
                             onClick={() => setPage((prev) => Math.max(prev - 1, 0))}
-                            disabled={page === 0}
-                            className={`px-3 py-1 rounded border ${page === 0 ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-white hover:bg-gray-50"
+                            disabled={page == 0}
+                            className={`px-3 py-1 rounded border ${page == 0 ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-white hover:bg-gray-50"
                                 }`}
                         >
                             Prev
diff --git a/src/components/auth/LoginForm.tsx b/src/components/auth/LoginForm.tsx
index ebaf489..b6493d3 100644
--- a/src/components/auth/LoginForm.tsx
+++ b/src/components/auth/LoginForm.tsx
@@ -115,15 +115,15 @@ const LoginForm = ({ onSwitchToRegister }) => {
                 }
             );
 
-            if (res.status === 200) {
+            if (res.status == 200) {
                 TokenStorage.setTokens(res.data.accessToken, res.data.refreshToken)
                 formErrorRef.current = { message: "Login Successfully", error: false }
                 navigate("/");
             }
         } catch (err) {
-            if (err.response?.status === 400 || err.response?.status === 401) {
+            if (err.response?.status == 400 || err.response?.status == 401) {
                 formErrorRef.current = { message: "The email or password you entered is invalid.", error: true }
-            } else if(err.response?.status === 404) {
+            } else if(err.response?.status == 404) {
                 formErrorRef.current = { message: "Email not found. Please sign up to continue.", error: true }
             } else {
                 formErrorRef.current = { message: "Something went wrong. Please refresh and try again.", error: true }
diff --git a/src/components/auth/OAuthGoogle.tsx b/src/components/auth/OAuthGoogle.tsx
index bdc5544..98c5e27 100644
--- a/src/components/auth/OAuthGoogle.tsx
+++ b/src/components/auth/OAuthGoogle.tsx
@@ -34,7 +34,7 @@ const OAuthGoogle: React.FC<OAuthGoogleProps> = ({ isLogin }) => {
             }
         })
             .then((res) => {
-                if (res.status === 200 || res.status === 201) {
+                if (res.status == 200 || res.status == 201) {
                     toast.dismiss();
 
                     dispatch(updateUser({ ...res.data, authorized: true, accessToken: res.headers.authorization }));
diff --git a/src/components/auth/RegisterForm.tsx b/src/components/auth/RegisterForm.tsx
index ff0c635..879cc3b 100644
--- a/src/components/auth/RegisterForm.tsx
+++ b/src/components/auth/RegisterForm.tsx
@@ -94,7 +94,7 @@ const RegisterForm = ({ onSwitchToLogin }) => {
 
     const validateConfirmPassword = (confirmPassword: string, password: string) => {
         if (!confirmPassword) return "Please confirm your password";
-        if (confirmPassword !== password) return "Passwords do not match";
+        if (confirmPassword != password) return "Passwords do not match";
         return "";
     };
 
@@ -105,7 +105,7 @@ const RegisterForm = ({ onSwitchToLogin }) => {
         if (errors[field]) setErrors({ ...errors, [field]: "" });
 
         // If password changes, check confirm password
-        if (field === "password" && formData.confirmPassword && errors.confirmPassword) {
+        if (field == "password" && formData.confirmPassword && errors.confirmPassword) {
             const confirmError = validateConfirmPassword(formData.confirmPassword, value);
             if (!confirmError) setErrors({ ...errors, password: "", confirmPassword: "" });
         }
@@ -121,7 +121,7 @@ const RegisterForm = ({ onSwitchToLogin }) => {
         const newErrors = { firstName: firstNameError, lastName: lastNameError, email: emailError, password: passwordError, confirmPassword: confirmPasswordError };
         setErrors(newErrors);
 
-        if (Object.values(newErrors).some(e => e !== "")) return;
+        if (Object.values(newErrors).some(e => e != "")) return;
 
         setIsLoading(true);
 
@@ -137,12 +137,12 @@ const RegisterForm = ({ onSwitchToLogin }) => {
                 { withCredentials: true }
             );
 
-            if (res.status === 201) {
+            if (res.status == 201) {
                 TokenStorage.setTokens(res.data.accessToken, res.data.refreshToken);
                 navigate("/");
             }
         } catch (err: any) {
-            if (err.response?.status === 409) {
+            if (err.response?.status == 409) {
                 formErrorRef.current = { message: 'Email already exists. Try logging in.', error: true };
             } else {
                 formErrorRef.current = { message: 'Something went wrong. Please refresh and try again.', error: true };
diff --git a/src/components/auth/UsertAuthUI.tsx b/src/components/auth/UsertAuthUI.tsx
index 67ec3b0..fbc1718 100644
--- a/src/components/auth/UsertAuthUI.tsx
+++ b/src/components/auth/UsertAuthUI.tsx
@@ -18,9 +18,9 @@ function UserAuthUI() {
   // Sync isLogin state with the current route
   useEffect(() => {
     const path = location.pathname;
-    if (path === "/login") {
+    if (path == "/login") {
       setIsLogin(true);
-    } else if (path === "/register") {
+    } else if (path == "/register") {
       setIsLogin(false);
     }
   }, [location.pathname]);
diff --git a/src/components/client/ClientAuditModal.tsx b/src/components/client/ClientAuditModal.tsx
index 8a31ee0..858f7ea 100644
--- a/src/components/client/ClientAuditModal.tsx
+++ b/src/components/client/ClientAuditModal.tsx
@@ -38,7 +38,7 @@ const ClientAuditModal: React.FC<ClientAuditModalProps> = ({ open, onClose, reci
                 },
             })
             // let res = await api.get(`/api/v1/accounts/${accountId}/transactions/${transactionId}/audit?lang=hi`)
-            if (res?.status === 200) {
+            if (res?.status == 200) {
                 // console.log(res?.data?.events)
                 // let auditResponse = res?.data?.events
                 setAuditStatus(res.data.events || []);
diff --git a/src/components/client/DeclineModal.tsx b/src/components/client/DeclineModal.tsx
index ea925fa..b24df77 100644
--- a/src/components/client/DeclineModal.tsx
+++ b/src/components/client/DeclineModal.tsx
@@ -58,7 +58,7 @@ export default function DeclineModal({
                   type="radio"
                   name="declineReason"
                   value={r}
-                  checked={reason === r}
+                  checked={reason == r}
                   onChange={() => setReason(r)}
                   className="h-4 w-4 text-red-500 border-gray-300 focus:ring-red-500"
                 />
@@ -69,7 +69,7 @@ export default function DeclineModal({
         </div>
 
         {/* Comments (only for Other) */}
-        {reason === "Other" && (
+        {reason == "Other" && (
           <div className="mb-6">
             <label className="block text-sm font-medium text-gray-700 mb-1">
               Additional Comments
diff --git a/src/components/client/DocumentPages.tsx b/src/components/client/DocumentPages.tsx
index e58ec90..ace3756 100644
--- a/src/components/client/DocumentPages.tsx
+++ b/src/components/client/DocumentPages.tsx
@@ -14,93 +14,94 @@ const DocumentPages = ({ selectedDocuments, setDropDownTogglePage, dropDownToggl
     const [currentPage, setCurrentPage] = useState(0);
 
     return (
-            <div className="flex flex-col gap-2 pb-[6rem]">
-                {selectedDocuments && selectedDocuments.length && selectedDocuments.map((document, indx) => {
-                   return (
+        <div className="flex flex-col gap-2 pb-[6rem]">
+            {selectedDocuments && selectedDocuments.length && selectedDocuments.map((document, indx) => {
+                return (
+                    <div
+                        key={indx}
+
+                    // tabIndex={1}
+                    // onBlur={() => setDropDownTogglePage('')}
+                    >
                         <div
-                            key={indx}
-
-                        // tabIndex={1}
-                        // onBlur={() => setDropDownTogglePage('')}
-                        >
-                            <div
-                                onClick={() => {
-                                    setDropDownTogglePage(`${(dropDownTogglePage === 'pageDropDown' + indx) ? '' : 'pageDropDown' + indx}`)
-                                }
-                                }
-                                className={`p-2 ${(dropDownTogglePage === 'pageDropDown' + indx) ? "bg-[var(--primary)]" : "bg-slate-200"} flex flex-col justify-center items-center gap-2 rounded`}>
-                                {
-                                    document.pages != undefined && <img
-                                        key={indx}
-                                        className='rounded-sm shadow'
-                                        src={document.pages[0].src}
-                                        alt="" />
-                                }
-
-                                <div
-                                    className={`flex items-center justify-between w-full text-xs rounded-sm cursor-pointer ${(dropDownTogglePage === 'pageDropDown' + indx) ? "text-slate-100" : "text-slate-600"}`}>
-                                    <p className={`whitespace-nowrap overflow-hidden text-ellipsis max-w-[18ch]`}>{document.name}</p>
-                                    <MdKeyboardArrowDown className={`${(dropDownTogglePage === 'pageDropDown' + indx) ? 'rotate-180' : ''}`} />
-                                </div>
-                            </div>
-
-
+                            onClick={() => {
+                                setDropDownTogglePage(`${(dropDownTogglePage == 'pageDropDown' + indx) ? '' : 'pageDropDown' + indx}`);
+                                window.location.hash = document.documentId + "" + 0;
+                            }
+                            }
+                            className={`p-2 ${(dropDownTogglePage == 'pageDropDown' + indx) ? "bg-[var(--primary)]" : "bg-slate-200"} flex flex-col justify-center items-center gap-2 rounded`}>
                             {
-                                dropDownTogglePage === 'pageDropDown' + indx &&
-                                <div className="my-1 flex justify-center items-center gap-2 flex-wrap">
-                                    {/* Prev Button */}
-                                    <a
-                                        href={"#" + document.documentId + (currentPage - 1)}
-                                        className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage === 0 ? "pointer-events-none opacity-50" : ""
-                                            }`}
-                                        onClick={(e) => {
-                                            if (currentPage === 0) e.preventDefault();
-                                            else setCurrentPage(currentPage - 1);
-                                        }}
-                                    >
-                                        <GrFormPrevious />
-                                    </a>
-
-                                    {/* Page Selector */}
-                                    <select
-                                        className="w-[58px] py-1 text-xs text-slate-400 outline-none"
-                                        value={currentPage}
-                                        onChange={(e) => {
-                                            const newPage = Number(e.target.value);
-                                            setCurrentPage(newPage);
-                                            window.location.hash = document.documentId + "" + newPage;
-                                        }}
-                                    >
-                                        {document.pages != undefined && document.pages.map((_, pageIndex) => (
-                                            <option key={pageIndex} value={pageIndex}>
-                                                {pageIndex + 1}
-                                            </option>
-                                        ))}
-                                    </select>
-
-                                    <span className="text-xs text-slate-600">
-                                        / {document.pages?.length}
-                                    </span>
-
-                                    {/* Next Button */}
-                                    <a
-                                        href={"#" + document.documentId + (currentPage + 1)}
-                                        className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage === document.pages?.length - 1 ? "pointer-events-none opacity-50" : ""
-                                            }`}
-                                        onClick={(e) => {
-                                            if (currentPage === document.pages?.length - 1) e.preventDefault();
-                                            else setCurrentPage(currentPage + 1);
-                                        }}
-                                    >
-                                        <MdOutlineNavigateNext />
-                                    </a>
-                                </div>
+                                document.pages != undefined && <img
+                                    key={indx}
+                                    className='rounded-sm shadow'
+                                    src={document.pages[0].src}
+                                    alt="" />
                             }
 
+                            <div
+                                className={`flex items-center justify-between w-full text-xs rounded-sm cursor-pointer ${(dropDownTogglePage == 'pageDropDown' + indx) ? "text-slate-100" : "text-slate-600"}`}>
+                                <p className={`whitespace-nowrap overflow-hidden text-ellipsis max-w-[18ch]`}>{document.name}</p>
+                                <MdKeyboardArrowDown className={`${(dropDownTogglePage == 'pageDropDown' + indx) ? 'rotate-180' : ''}`} />
+                            </div>
                         </div>
-                    )
-                })}
-            </div>
+
+
+                        {
+                            dropDownTogglePage == 'pageDropDown' + indx &&
+                            <div className="my-1 flex justify-center items-center gap-2 flex-wrap">
+                                {/* Prev Button */}
+                                <a
+                                    href={"#" + document.documentId + (currentPage - 1)}
+                                    className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage == 0 ? "pointer-events-none opacity-50" : ""
+                                        }`}
+                                    onClick={(e) => {
+                                        if (currentPage == 0) e.preventDefault();
+                                        else setCurrentPage(currentPage - 1);
+                                    }}
+                                >
+                                    <GrFormPrevious />
+                                </a>
+
+                                {/* Page Selector */}
+                                <select
+                                    className="w-[58px] py-1 text-xs text-slate-400 outline-none"
+                                    value={currentPage}
+                                    onChange={(e) => {
+                                        const newPage = Number(e.target.value);
+                                        setCurrentPage(newPage);
+                                        window.location.hash = document.documentId + "" + newPage;
+                                    }}
+                                >
+                                    {document.pages != undefined && document.pages.map((_, pageIndex) => (
+                                        <option key={pageIndex} value={pageIndex}>
+                                            {pageIndex + 1}
+                                        </option>
+                                    ))}
+                                </select>
+
+                                <span className="text-xs text-slate-600">
+                                    / {document.pages?.length}
+                                </span>
+
+                                {/* Next Button */}
+                                <a
+                                    href={"#" + document.documentId + (currentPage + 1)}
+                                    className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage == document.pages?.length - 1 ? "pointer-events-none opacity-50" : ""
+                                        }`}
+                                    onClick={(e) => {
+                                        if (currentPage == document.pages?.length - 1) e.preventDefault();
+                                        else setCurrentPage(currentPage + 1);
+                                    }}
+                                >
+                                    <MdOutlineNavigateNext />
+                                </a>
+                            </div>
+                        }
+
+                    </div>
+                )
+            })}
+        </div>
     )
 }
 
diff --git a/src/components/client/ReassignModal.tsx b/src/components/client/ReassignModal.tsx
index a48be6d..5949a17 100644
--- a/src/components/client/ReassignModal.tsx
+++ b/src/components/client/ReassignModal.tsx
@@ -23,7 +23,7 @@ export default function ReassignModal({ open, onClose, onConfirm }: ReassignModa
     if (!email.trim()) newErrors.email = "Email is required.";
     else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) newErrors.email = "Enter a valid email.";
     setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
+    return Object.keys(newErrors).length == 0;
   };
 
   const handleSubmit = () => {
diff --git a/src/components/client/SignCompletionScreen.tsx b/src/components/client/SignCompletionScreen.tsx
index 31a2d33..eef9367 100644
--- a/src/components/client/SignCompletionScreen.tsx
+++ b/src/components/client/SignCompletionScreen.tsx
@@ -319,7 +319,7 @@ const SignCompletionScreen: React.FC = () => {
                             <FiDownload className="w-5 h-5 mr-3" />
                             Download Signed Document
                         </button>
-                        {signType === SignTypeEnum.selfSign ? <a
+                        {signType == SignTypeEnum.selfSign ? <a
                             href="http://localhost:5173/"
                             // target="_blank"
                             rel="noopener noreferrer"
diff --git a/src/components/client/SignDocument.tsx b/src/components/client/SignDocument.tsx
index 821aaf8..2c3e692 100644
--- a/src/components/client/SignDocument.tsx
+++ b/src/components/client/SignDocument.tsx
@@ -239,7 +239,7 @@ const SignDocument = () => {
 
     useEffect(() => {
         let indx = fitObj[selFitIndx].value
-        if (indx === "FIT") {
+        if (indx == "FIT") {
             indx = "100";
         }
         zoom(Number(indx), 'zoom-con')
@@ -272,11 +272,11 @@ const SignDocument = () => {
                 setFocusElement({ ...droppedItems[0], focusElementIndx: 0 });
             }
 
-            if (focusElement === null || !("focusElementIndx" in focusElement)) return;
+            if (focusElement == null || !("focusElementIndx" in focusElement)) return;
 
             // const docCon = document.getElementById("doc-con");
             // document.addEventListener("keydown", (e) => {
-            //     if (e.key === "Tab") {
+            //     if (e.key == "Tab") {
             //         e.preventDefault();
 
             //         console.log("Listening Tab Key Press")
@@ -320,7 +320,7 @@ const SignDocument = () => {
     }, [showConfetti]);
 
     useEffect(() => {
-        if (recSignStatus === "COMPLETED") {
+        if (recSignStatus == "COMPLETED") {
             // setHideTags(true);
             setTransparentTags(true);
         } else {
@@ -331,7 +331,7 @@ const SignDocument = () => {
     useEffect(() => {
         if (saved.save && Object.keys(signConfObj).length) {
             const keys = Object.keys(signConfObj)
-            const index = Number(keys[0])
+            const index = keys[0]
 
             const newObj = {
                 accepted: true,
@@ -353,11 +353,11 @@ const SignDocument = () => {
                     { "ngrok-skip-browser-warning": "69420", }
             })
             .then((res) => {
-                if (res.status === 200) {
+                if (res.status == 200) {
                     setSelectedDocuments(res?.data?.documents)
                     setRecipient(res?.data?.details)
 
-                    const sortedDroppedItems = res?.data?.tagJsons.sort((a, b) => a.navigationOrder - b.navigationOrder);
+                    const sortedDroppedItems = res?.data?.tags.sort((a, b) => a.navigationOrder - b.navigationOrder);
                     setDroppedItems(sortedDroppedItems)
 
                     setFocusElement({ ...sortedDroppedItems[0], focusElementIndx: 0 });
@@ -376,16 +376,16 @@ const SignDocument = () => {
                         setIsFields(false)
                     }
 
-                    if (res?.data?.status === "COMPLETED" || res?.data?.status === "DECLINED" || res?.data?.details.type == "CC") {
+                    if (res?.data?.status == "COMPLETED" || res?.data?.status == "DECLINED" || res?.data?.details.type == "CC") {
                         // setShowCompletionScreen(true)
                         setTransparentTags(true)
                         setHideTags(true)
                     }
 
 
-                    if (res?.data?.tagJsons && res?.data?.tagJsons.length > 0) {
-                        for (const tag of res?.data?.tagJsons) {
-                            if (tag.type === "SIGNATURE" && "value" in tag && tag.value) {
+                    if (res?.data?.tags && res?.data?.tags.length > 0) {
+                        for (const tag of res?.data?.tags) {
+                            if (tag.type == "SIGNATURE" && "value" in tag && tag.value) {
 
                                 axiosInstance.get(`/api/v1/sign/${recipientId}/signatures/${tag.value}`).then((res) => {
                                     console.log(res, "line 386")
@@ -402,7 +402,7 @@ const SignDocument = () => {
                                 // });
 
 
-                            } else if (tag.type === "INITIALS") {
+                            } else if (tag.type == "INITIALS") {
 
                             }
                         }
@@ -427,7 +427,7 @@ const SignDocument = () => {
                     signatureId: saved.signatureId
                 });
 
-                if (res.status === 201 || res.status === 202) {
+                if (res.status == 201 || res.status == 202) {
                     newSignatureIdForCreateDefault = res.data.id;
                 }
             } catch (err) {
@@ -446,23 +446,23 @@ const SignDocument = () => {
 
         let signInitialsCount = 0;
         for (let i = 0; i < droppedItems.length; i++) {
-            if (droppedItems[i].type === "SIGNATURE" || droppedItems[i].type === "INITIALS") {
+            if (droppedItems[i].type == "SIGNATURE" || droppedItems[i].type == "INITIALS") {
                 signInitialsCount += 1;
             }
         }
 
-        if (signInitialsCount !== Object.keys(signConfObj).length) {
+        if (signInitialsCount != Object.keys(signConfObj).length) {
             // handleToastError("Please ensure all signature and initials are signed")
             return;
         }
 
         for (let tag of droppedItems) {
-            if ("required" in tag && tag.required && ((tag.type !== "SIGNATURE" && tag.type !== "INITIALS") && (tag.value === undefined || tag.value === null || tag.value === "" || !("value" in tag)))) {
+            if ("required" in tag && tag.required && ((tag.type != "SIGNATURE" && tag.type != "INITIALS") && (tag.value == undefined || tag.value == null || tag.value == "" || !("value" in tag)))) {
                 // handleToastError(`${tag.label} is required`)
                 return;
             }
 
-            if ("id" in tag && (tag.type === "SIGNATURE" || tag.type === "INITIALS")) {
+            if ("id" in tag && (tag.type == "SIGNATURE" || tag.type == "INITIALS")) {
                 const tagData: TagSubmitData = {
                     id: tag.id as string,
                     type: tag.type,
@@ -480,10 +480,10 @@ const SignDocument = () => {
                     value: tag.value ? tag.value as string : ""
                 }
                 submitData.tags.push(tagData);
-            } else if (tag.type === "SIGNATURE" || tag.type === "INITIALS") {
+            } else if (tag.type == "SIGNATURE" || tag.type == "INITIALS") {
                 // Not getting recipient id in details it is undefined - not working self sign
                 tag.recipientId = recipient.id;
-                tag.documentId = Number(tag.documentId)
+                tag.documentId = tag.documentId
 
                 createTagsAndSubmit.tags.push(
                     {
@@ -495,7 +495,7 @@ const SignDocument = () => {
                     })
             } else {
                 tag.recipientId = recipient.id
-                tag.documentId = Number(tag.documentId)
+                tag.documentId = tag.documentId
                 createTagsAndSubmit.tags.push(
                     {
                         ...tag,
@@ -519,7 +519,7 @@ const SignDocument = () => {
 
             const signRes = await axiosInstance.post(`/api/v1/sign/${recipientId}`, {}, { headers: { "ngrok-skip-browser-warning": "69420", } })
             dispatch(hideLoader());
-            if (signRes.status === 200) {
+            if (signRes.status == 200) {
                 dispatch(hideLoader());
                 setTransparentTags(true)
                 // setShowConfetti(true)
@@ -552,8 +552,8 @@ const SignDocument = () => {
 
         // If FocusElement is present updating in Based on Next and Prev
         const currFocusElemIndx = focusElement.focusElementIndx;
-        if (currFocusElemIndx === undefined) return;
-        let updIndx = (action === "N") ? (currFocusElemIndx + 1) : (currFocusElemIndx - 1)
+        if (currFocusElemIndx == undefined) return;
+        let updIndx = (action == "N") ? (currFocusElemIndx + 1) : (currFocusElemIndx - 1)
 
         if (updIndx >= droppedItems.length || updIndx < 0 || !droppedItems[updIndx].id) updIndx = 0;
 
@@ -630,7 +630,7 @@ const SignDocument = () => {
 
 
                 (
-                    (item.id !== null && item.id !== undefined && item.id !== "")
+                    (item.id != null && item.id != undefined && item.id != "")
                         ? (
                             (`${item.id}`) in signConfObj && signConfObj[`${item.id}`].accepted
                         ) : (
@@ -687,7 +687,7 @@ const SignDocument = () => {
                 width: dragElemData.width,
                 height: dragElemData.height,
             },
-            styles: dragElemData.label === "text" ? {
+            styles: dragElemData.label == "text" ? {
                 "font": "Great Vibes",
                 "italic": false,
                 "bold": false,
@@ -699,12 +699,12 @@ const SignDocument = () => {
             pageIndex: pageIndex,
             recipientId: dragElemData.recipientId,
             recipientIndx: dragElemData.recipientIndx,
-            required: (dragElemData.label !== TagsTypes.SIGNATURE && dragElemData.label !== TagsTypes.INITIALS) ? false : true,
+            required: (dragElemData.label != TagsTypes.SIGNATURE && dragElemData.label != TagsTypes.INITIALS) ? false : true,
             update: true,
             isDeleted: false
         }
 
-        if (prepData.type === "NAME") {
+        if (prepData.type == "NAME") {
             prepData.firstName = true
             prepData.lastName = true
         }
@@ -714,18 +714,18 @@ const SignDocument = () => {
             prepData.isGroupExist = false;
         }
 
-        if (prepData.type.toLowerCase() === "temporal") {
+        if (prepData.type.toLowerCase() == "temporal") {
             prepData.currentTimeStamp = true;
         }
 
-        if (prepData.type.toLowerCase() === "number") {
+        if (prepData.type.toLowerCase() == "number") {
             prepData.decimalPlace = 0;
             prepData.isCurrency = false;
         }
 
-        if (prepData.type.toLowerCase() === TagsTypes.SIGNATURE || prepData.type.toLowerCase() === TagsTypes.INITIALS) {
+        if (prepData.type.toLowerCase() == TagsTypes.SIGNATURE || prepData.type.toLowerCase() == TagsTypes.INITIALS) {
 
-            const currDocTags = droppedItems.filter((val) => val.pageIndex === prepData.pageIndex)
+            const currDocTags = droppedItems.filter((val) => val.pageIndex == prepData.pageIndex)
             setSignConfObj({
                 ...signConfObj,
                 [currDocTags.length]: {
@@ -744,7 +744,7 @@ const SignDocument = () => {
     };
 
     const handleSetIsFields = (setTo: boolean) => {
-        if (setTo !== isFields) setIsFields(setTo);
+        if (setTo != isFields) setIsFields(setTo);
     }
 
     const handleOnConsent = () => {
@@ -772,7 +772,7 @@ const SignDocument = () => {
             language: "en"
         })
             .then((res) => {
-                if (res.status === 202) {
+                if (res.status == 202) {
                     // setShowCompletionScreen(true);
                     // navigate("/transaction-reassigned")
                     window.location.href = `/transaction-reassigned`
@@ -839,9 +839,9 @@ const SignDocument = () => {
     }, []);
 
     // if (showCompletionScreen) {
-    //     if (recSignStatus === "COMPLETED") {
+    //     if (recSignStatus == "COMPLETED") {
     //         return <CompletionScreen />
-    //     } else if (recSignStatus === "DECLINED") {
+    //     } else if (recSignStatus == "DECLINED") {
     //         return <CompletionScreen hit="Action Canceled! " title="Maybe Next Time!" message={"Your request has been declined successfully. You can revisit anytime if you change your mind."} textColorSuccess={false} />
     //     } else {
     //         return <CompletionScreen />
@@ -870,7 +870,7 @@ const SignDocument = () => {
 
                             {/* Documnt Nav */}
                             <>
-                                {selectedDocuments !== null &&
+                                {selectedDocuments != null &&
                                     <div
                                         className=""
                                         tabIndex={1}
@@ -933,11 +933,11 @@ const SignDocument = () => {
                                 onDeclineClick={() => setDeclineOpen(true)}
                                 onReassignClick={() => setReassignOpen(true)}
                                 onAuditHistoryClick={() => setAuditHistoryOpen(true)}
-                                showDecAndReassign={recipient?.type !== "CC"}
+                                showDecAndReassign={recipient?.type != "CC"}
                                 transactionId={"1"}
                             />
 
-                            {!transparentTags && recipient?.type !== "CC" && (
+                            {!transparentTags && recipient?.type != "CC" && (
                                 <div
                                     className={`absolute z-50 left-0 bottom-0 bg-[var(--primary)] w-full flex justify-around items-center 
                 px-2.5 transition-all duration-500 ease-in-out
@@ -966,7 +966,7 @@ const SignDocument = () => {
 
 
                     {/* Horizontal Loader */}
-                    {horizontalFormLoader.totalRequired !== null && !transparentTags && (
+                    {horizontalFormLoader.totalRequired != null && !transparentTags && (
                         <div className="w-full h-[4px] bg-slate-400 relative">
                             <div
                                 className="h-full bg-yellow-300 transition-all duration-300"
@@ -992,11 +992,11 @@ const SignDocument = () => {
                     {/* <div className="lg:col-span-2 bg-slate-100 h-full p-4 overflow-y-auto"></div> */}
                     <div
                         id="tags-list-client-side"
-                        className={`absolute w-[220px] left-0 top-[42px] border-r-2 sm:border-none border-slate-200 z-10 sm:static sm:w-auto sm:col-span-2 h-full p-4 overflow-y-auto ${recipient?.type !== "CC" ? "bg-white" : ""} ${!provideTags && isFields ? "hidden" : ""}`}>
+                        className={`absolute w-[220px] left-0 top-[42px] border-r-2 sm:border-none border-slate-200 z-10 sm:static sm:w-auto sm:col-span-2 h-full p-4 overflow-y-auto ${recipient?.type != "CC" ? "bg-white" : ""} ${!provideTags && isFields ? "hidden" : ""}`}>
 
 
                         {!transparentTags && <div className='flex flex-col md:flex-row justify-between items-center bg-slate-100 p-1.5 rounded-2xl border-1 border-gray-200 mb-3'>
-                            {provideTags && recipient?.type !== "CC" && <div
+                            {provideTags && recipient?.type != "CC" && <div
                                 onClick={() => handleSetIsFields(true)}
                                 className={`flex items-center gap-1 cursor-pointer text-xs w-full justify-center py-1.5 rounded-2xl ${isFields ? 'bg-[var(--primary)] text-white' : ''} transition-all duration-300'}`}
                             >
@@ -1015,7 +1015,7 @@ const SignDocument = () => {
                             {/* <p className="hidden sm:block text-xs text-white">Hi! {recipient && recipient.firstName} {recipient && recipient.lastName}</p> */}
                         </div>}
 
-                        {!transparentTags && isFields && recipientId && provideTags && recipient?.type !== "CC" && <FieldList color={"#8f87f1"} recipientId={Number(recipientId)} recipientIndx={0} acntId={"1"} />}
+                        {!transparentTags && isFields && recipientId && provideTags && recipient?.type != "CC" && <FieldList color={"#8f87f1"} recipientId={recipientId} recipientIndx={0} acntId={"1"} />}
 
                         {!isFields && <DocumentPages
                             selectedDocuments={selectedDocuments}
@@ -1028,7 +1028,7 @@ const SignDocument = () => {
                     {/* Main container */}
                     <div
                         id="doc-con"
-                        className={`zoom-con relative ${provideTags ? (isFields && selectedTag !== null ? "col-span-8" : "col-span-10") : (isFields ? "col-span-12" : "col-span-10")} sm:px-4 bg-slate-100 h-full w-full overflow-auto scroll-smooth transition-all duration-200 pb-[4rem]`}
+                        className={`zoom-con relative ${provideTags ? (isFields && selectedTag != null ? "col-span-8" : "col-span-10") : (isFields ? "col-span-12" : "col-span-10")} sm:px-4 bg-slate-100 h-full w-full overflow-auto scroll-smooth transition-all duration-200 pb-[4rem]`}
                     >
                         {
                             selectedDocuments && selectedDocuments.length > 0 && selectedDocuments.map((doc) => {
@@ -1043,7 +1043,7 @@ const SignDocument = () => {
                                                 doc.pages && doc.pages.length > 0 && doc.pages.map((page, indx) => {
                                                     const key = `${doc.documentId}_${page.index}`;
                                                     // const tagJsonData = [...droppedItems];
-                                                    const currDocTags = droppedItems.filter((val) => val.pageIndex === page.index)
+                                                    const currDocTags = droppedItems.filter((val) => val.pageIndex == page.index)
                                                     let scale: { x: number | null, y: number | null } = { x: null, y: null }
                                                     return (
                                                         <div
@@ -1107,7 +1107,7 @@ const SignDocument = () => {
                                                             {/* Side details of documents Pages and document Name - END */}
 
 
-                                                            {!transparentTags && focusElement !== null && focusElement.documentId == doc.documentId && focusElement.pageIndex == page.index &&
+                                                            {!transparentTags && focusElement != null && focusElement.documentId == doc.documentId && focusElement.pageIndex == page.index &&
                                                                 <div
                                                                     id="tag-navigation-btn"
                                                                     className={`absolute right-0 translate-x-[100%] flex justify-center gap-0 items-center z-50 cursor-pointer transition-all duration-300`}
@@ -1139,24 +1139,24 @@ const SignDocument = () => {
                         }
 
 
-                        {(navigationTagPos === NavigationTagPosEnum.ABOVE || navigationTagPos === NavigationTagPosEnum.BELOW) &&
+                        {(navigationTagPos == NavigationTagPosEnum.ABOVE || navigationTagPos == NavigationTagPosEnum.BELOW) &&
                             <div
                                 onClick={() => scrollToElement(focusElement?.navigationOrder)}
-                                className={`cursor-pointer fixed ${navigationTagPos === NavigationTagPosEnum.ABOVE ? "top-[45px]" : "bottom-[45px]"} right-[8%] flex flex-col items-center`}>
+                                className={`cursor-pointer fixed ${navigationTagPos == NavigationTagPosEnum.ABOVE ? "top-[45px]" : "bottom-[45px]"} right-[8%] flex flex-col items-center`}>
                                 {/* Arrow pointing up */}
-                                {navigationTagPos === NavigationTagPosEnum.ABOVE && <div className="w-0 h-0 border-l-6 border-r-6 border-b-6 border-l-transparent border-r-transparent border-b-[var(--primary)]"></div>}
+                                {navigationTagPos == NavigationTagPosEnum.ABOVE && <div className="w-0 h-0 border-l-6 border-r-6 border-b-6 border-l-transparent border-r-transparent border-b-[var(--primary)]"></div>}
 
                                 {/* Label box */}
                                 <div
                                     className="bg-[var(--primary)] text-white text-sm px-3 py-1 rounded-md shadow-md flex items-center gap-1">
                                     <span className="capitalize">{focusElement?.type.toLowerCase()}</span>
                                 </div>
-                                {navigationTagPos === NavigationTagPosEnum.BELOW && <div className="w-0 h-0 border-l-6 border-r-6 border-b-6 border-l-transparent border-r-transparent border-b-[var(--primary)] rotate-[180deg]"></div>}
+                                {navigationTagPos == NavigationTagPosEnum.BELOW && <div className="w-0 h-0 border-l-6 border-r-6 border-b-6 border-l-transparent border-r-transparent border-b-[var(--primary)] rotate-[180deg]"></div>}
                             </div>}
 
                     </div>
 
-                    {provideTags && selectedTag && selectedTag !== null && "key" in selectedTag && "index" in selectedTag &&
+                    {provideTags && selectedTag && selectedTag != null && "key" in selectedTag && "index" in selectedTag &&
                         <div className={`col-span-2 ${provideTags ? "" : "order-first"} h-full ${!isFields ? "bg-white" : isFields && provideTags ? "bg-white" : ""} overflow-y-auto`}>
                             {/* Right Side Attributes Section if providedTags - START */}
                             <RightSideBar
@@ -1175,8 +1175,8 @@ const SignDocument = () => {
 
             </div>
 
-            {/* {showCompletionScreen && recSignStatus === "COMPLETED" && <CompletionScreen />}
-            {showCompletionScreen && recSignStatus === "DECLINED" && <CompletionScreen title="No worries! you declined the signing request." message={"Your signing request has been declined. No changes were made to the document."} textColorSuccess={false} />} */}
+            {/* {showCompletionScreen && recSignStatus == "COMPLETED" && <CompletionScreen />}
+            {showCompletionScreen && recSignStatus == "DECLINED" && <CompletionScreen title="No worries! you declined the signing request." message={"Your signing request has been declined. No changes were made to the document."} textColorSuccess={false} />} */}
 
             <div style={{ display: `${openSign ? 'block' : 'none'}` }}>
                 {recipient &&
@@ -1198,7 +1198,7 @@ const SignDocument = () => {
             {globalLoader.isLoading && <Loader />}
 
             {
-                !transparentTags && selectedDocuments !== null && !showCompletionScreen && !signerConsent.consent && recipient?.type !== "CC" &&
+                !transparentTags && selectedDocuments != null && !showCompletionScreen && !signerConsent.consent && recipient?.type != "CC" &&
                 <ConsentScreen
                     onConsent={() => handleOnConsent()}
                 // onDecline={() => console.log("User declined")}
@@ -1226,7 +1226,7 @@ const SignDocument = () => {
 
 
 
-            {!transparentTags && recipient?.type !== "CC" && <>
+            {!transparentTags && recipient?.type != "CC" && <>
                 <div className={`w-full shadow-[0_20px_35px_rgba(0,0,0,0.25)] bottom-0 left-0 bg-white px-4 py-2 flex justify-between items-center gap-4`}>
                     <p className='text-sm text-slate-600'>By Signing I agree Sign Made Easy <a href="" className="text-[var(--mainPrimaryBtn)]">Terms & Conditions.</a></p>
                     {/* <div className='flex items-center gap-8 cursor-pointer text-xs px-2 py-1 rounded-sm outline-none'>
@@ -1272,7 +1272,7 @@ const SignDocument = () => {
 
                                             className='flex items-center justify-between w-full'>
                                             <p className='whitespace-nowrap overflow-hidden text-ellipsis max-w-[12ch]'>{val.label}</p>
-                                            {selFitIndx === indx && <FaCheck className='text-sm text-slate-400' />}
+                                            {selFitIndx == indx && <FaCheck className='text-sm text-slate-400' />}
                                         </div>
                                     </div>)
                                 })
diff --git a/src/components/client/TagsCon.tsx b/src/components/client/TagsCon.tsx
index 70a3a55..e0b4440 100644
--- a/src/components/client/TagsCon.tsx
+++ b/src/components/client/TagsCon.tsx
@@ -115,7 +115,7 @@ const TagsCon: React.FC<TagsConProps> = ({
             // Apply the movement to the element
             setDroppedItems(
                 droppedItems.map((item, i) =>
-                    i === index ? { ...item, dimensions: { ...item.dimensions, left, top }, update: true } : item
+                    i == index ? { ...item, dimensions: { ...item.dimensions, left, top }, update: true } : item
                 )
             );
 
@@ -140,7 +140,7 @@ const TagsCon: React.FC<TagsConProps> = ({
             if ("id" in tag) {
                 try {
                     const response = await api.delete(`/api/v1/sign/${recipientId}/tags/`, { data: [{ tagId: tag.id }] })
-                    if (response.status !== 200) throw "Tag Deletion error"
+                    if (response.status != 200) throw "Tag Deletion error"
                 } catch (err) {
                     return;
                 }
@@ -155,13 +155,13 @@ const TagsCon: React.FC<TagsConProps> = ({
                 // Find all items in the same group
                 const groupItems = droppedItems[key]
                     .map((item, idx) => ({ item, index: idx }))
-                    .filter(({ item }) => 'group' in item && item.group === groupId && !item.isDeleted);
+                    .filter(({ item }) => 'group' in item && item.group == groupId && !item.isDeleted);
 
                 // Sort group items by their top position to identify the parent (top-most)
                 groupItems.sort((a, b) => a.item.dimensions.top - b.item.dimensions.top);
 
                 // Check if the item being removed is the parent (top-most item)
-                const isParentItem = groupItems.length > 0 && groupItems[0].index === targetIndex;
+                const isParentItem = groupItems.length > 0 && groupItems[0].index == targetIndex;
 
                 if (isParentItem && groupItems.length > 1) {
                     // If removing the parent and there are child items, mark all items in the group as deleted
@@ -187,17 +187,17 @@ const TagsCon: React.FC<TagsConProps> = ({
                     setDroppedItems(prevState => ({
                         ...prevState,
                         [key]: prevState[key].map((item, index) =>
-                            index === targetIndex ? { ...item, isDeleted: true } : item
+                            index == targetIndex ? { ...item, isDeleted: true } : item
                         )
                     }));
 
                     // Check if this was the last item in the group after state update
                     // setTimeout(() => {
                     //     const remainingGroupItems = droppedItems[key].filter(item =>
-                    //         'group' in item && item.group === groupId && !item.isDeleted
+                    //         'group' in item && item.group == groupId && !item.isDeleted
                     //     );
 
-                    //     if (remainingGroupItems.length === 0) {
+                    //     if (remainingGroupItems.length == 0) {
                     //         // Remove group borders if no items left
                     //         removeGroupBorders(groupId);
                     //     } else {
@@ -209,7 +209,7 @@ const TagsCon: React.FC<TagsConProps> = ({
             } else {
                 // Handle non-group item removal (your existing logic)
                 setDroppedItems(prevState => prevState.filter((item, idx) => {
-                    return idx !== targetIndex;
+                    return idx != targetIndex;
                 }));
             }
         })()
@@ -218,7 +218,7 @@ const TagsCon: React.FC<TagsConProps> = ({
     const handleTagUpdate = (updateIndx: number, updateValue: string) => {
         if (droppedItems && droppedItems.length) {
             const updatedTag = droppedItems.map((val, indx) => {
-                if (indx === updateIndx) {
+                if (indx == updateIndx) {
                     return {
                         ...val,
                         value: updateValue
@@ -239,7 +239,7 @@ const TagsCon: React.FC<TagsConProps> = ({
     }
 
     const handleSignClick = async (index: number, id: number | undefined) => {
-        id = (id !== undefined && id !== null) ? id : index
+        id = (id != undefined && id != null) ? id : index
         setSignTagId(id)
         if (saved.save) {
             if (saved.isDefaultAndClicked) {
@@ -249,7 +249,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                         tagId: id
                     }, { headers: { "ngrok-skip-browser-warning": "69420", } })
 
-                    if (res.status === 202) {
+                    if (res.status == 202) {
                         setSaved({ ...saved, signatureId: res.data.id, isDefaultAndClicked: false });
                     }
                 } catch (error) { }
@@ -274,7 +274,7 @@ const TagsCon: React.FC<TagsConProps> = ({
         setOpenSign(true);
         // setDroppedItems((prev) => {
         //     return prev.map((obj, idx) => {
-        //         if (idx === index && obj.id === id) return { ...obj, valus: saved.signatureId }
+        //         if (idx == index && obj.id == id) return { ...obj, valus: saved.signatureId }
         //         return obj;
         //     })
         // })
@@ -296,18 +296,18 @@ const TagsCon: React.FC<TagsConProps> = ({
     }
 
     const handleSignAcknowledgeClick = (index: number) => {
-        if (saved.save && signConfObj === null) {
+        if (saved.save && signConfObj == null) {
             setSignConfObj([...signConfObj, index])
         }
     }
 
 
-    console.log(signConfObj, "Line 305")
+    console.log(signConfObj, saved, "Line 305")
 
     return (
         <>
             {currDocTags.map((item, index) => {
-                if (item.pageIndex !== pageIndex || Number(item.documentId) !== Number(documentId)) return <></>;
+                if ((item.pageIndex != pageIndex) || (item.documentId != documentId)) return <></>;
                 console.log('pageWidth:', pageWidth, 'computed left:', (item.dimensions.left / pageWidth) * 100);
                 return (
                     <div
@@ -326,7 +326,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                         //     top: `${item.dimensions.top}px`,
                         //     width: `${item.dimensions.width}px`,
                         //     height: `${item.dimensions.height}px`,
-                        //     border: `${((!hideTags && focusElement) && !transparentTags && focusElement.documentId === item.documentId && focusElement.focusElementIndx === index) ? '2px dashed #1c398e' : 'none'}`,
+                        //     border: `${((!hideTags && focusElement) && !transparentTags && focusElement.documentId == item.documentId && focusElement.focusElementIndx == index) ? '2px dashed #1c398e' : 'none'}`,
                         //     // display: `${hideTags ? 'none' : 'block'}`
                         // }}
 
@@ -353,7 +353,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                         </div>}
 
                         <>
-                            {selectedTag !== null && selectedTag?.key && selectedTag.key === pageIdkey && selectedTag.index === index &&
+                            {selectedTag != null && selectedTag?.key && selectedTag.key == pageIdkey && selectedTag.index == index &&
                                 <div className='absolute flex justify-between items-center w-full max-w-max bg-white top-[-22px] shadow z-20 text-sm rounded-t-sm' >
                                     <div className='flex justify-center items-center gap-1 bg-white px-2 shadow'>
                                         {/* <p className='w-2.5 h-2.5 rounded'
@@ -374,7 +374,7 @@ const TagsCon: React.FC<TagsConProps> = ({
 
                         {/* TEXT FIELD - START */}
                         {
-                            item.type === "TEXT" &&
+                            item.type == "TEXT" &&
                             <div
                                 id={item.navigationOrder}
                                 tabIndex={1}
@@ -397,7 +397,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                                             handleTagUpdate(index, val as string);
                                         }}
                                         onKeyDown={(e) => {
-                                            if (e.key === "Enter") e.preventDefault();
+                                            if (e.key == "Enter") e.preventDefault();
                                         }}
                                         contentEditable={true}
                                         className="outline-none whitespace-nowrap w-full max-h-max"
@@ -421,14 +421,14 @@ const TagsCon: React.FC<TagsConProps> = ({
                                         //     handleTagUpdate(index, val as string);
                                         // }}
                                         onKeyDown={(e) => {
-                                            if (e.key === "Enter") e.preventDefault();
+                                            if (e.key == "Enter") e.preventDefault();
                                         }}
                                         // onFocus={() => {
                                         // }}
                                         onBlur={(e) => {
                                             let val = e.target.textContent;
                                             handleTagUpdate(index, val as string);
-                                            if (typeof item.maskType === "string" && typeof val === "string" && item.maskCharacter) {
+                                            if (typeof item.maskType == "string" && typeof val == "string" && item.maskCharacter) {
                                                 val = val.replace(/ /g, "");
                                                 e.target.textContent = maskUtils(item.maskType, val, item.maskCharacter)
                                             }
@@ -443,7 +443,7 @@ const TagsCon: React.FC<TagsConProps> = ({
 
                         {/* EMAIL FIELD - START */}
                         {
-                            item.type === "EMAIL" &&
+                            item.type == "EMAIL" &&
                             <div
                                 id={item.navigationOrder}
                                 tabIndex={1}
@@ -458,7 +458,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                                             handleTagUpdate(index, val as string);
                                         }}
                                         onKeyDown={(e) => {
-                                            if (e.key === "Enter") {
+                                            if (e.key == "Enter") {
                                                 const val = e.currentTarget.textContent?.trim() || "";
                                                 const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
@@ -496,7 +496,7 @@ const TagsCon: React.FC<TagsConProps> = ({
 
                         {/* NAME FIELD - START */}
                         {
-                            item.type === "NAME" &&
+                            item.type == "NAME" &&
                             <div
                                 id={item.navigationOrder}
                                 tabIndex={1}
@@ -511,7 +511,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                                             handleTagUpdate(index, val as string);
                                         }}
                                         onKeyDown={(e) => {
-                                            if (e.key === "Enter") {
+                                            if (e.key == "Enter") {
                                                 e.preventDefault()
                                             };
                                         }}
@@ -532,7 +532,7 @@ const TagsCon: React.FC<TagsConProps> = ({
 
                         {/* NUMBER FIELD - START */}
                         {
-                            item.type === "NUMBER" &&
+                            item.type == "NUMBER" &&
                             <div
                                 id={item.navigationOrder}
                                 tabIndex={1}
@@ -556,7 +556,7 @@ const TagsCon: React.FC<TagsConProps> = ({
 
                         {/* COMPANY FIELD - START */}
                         {
-                            item.type === "COMPANY" &&
+                            item.type == "COMPANY" &&
                             <div
                                 id={item.navigationOrder}
                                 tabIndex={1}
@@ -571,7 +571,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                                             handleTagUpdate(index, val as string);
                                         }}
                                         onKeyDown={(e) => {
-                                            if (e.key === "Enter") {
+                                            if (e.key == "Enter") {
                                                 e.preventDefault()
                                             };
                                         }}
@@ -590,7 +590,7 @@ const TagsCon: React.FC<TagsConProps> = ({
 
                         {/* CHECKBOX FIELD - START */}
                         {
-                            item.type === "CHECKBOX" &&
+                            item.type == "CHECKBOX" &&
                             <div
                                 id={item.navigationOrder}
                                 className={`h-full w-full rounded flex justify-center items-center ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
@@ -608,7 +608,7 @@ const TagsCon: React.FC<TagsConProps> = ({
 
                         {/* SIGNATURE FIELD - START */}
                         {
-                            item.type === "SIGNATURE" &&
+                            item.type == "SIGNATURE" &&
                             <div
                                 tabIndex={1}
                                 id={item.navigationOrder}
@@ -620,7 +620,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                                 {
                                     (!transparentTags && !hideTags && !(saved.save &&
                                         (
-                                            (item.id !== null && item.id !== undefined && item.id !== "")
+                                            (item.id != null && item.id != undefined && item.id != "")
                                                 ? (
                                                     (`${item.id}`) in signConfObj && signConfObj[`${item.id}`].accepted
                                                 ) : (
@@ -629,7 +629,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                                         )
                                     )) ? (
                                         <FaSignature className="text-lg text-slate-600" />
-                                    ) : saved && saved.saveType !== null && saved.saveType === "SELECT" ? (
+                                    ) : saved && saved.saveType != null && saved.saveType == "SELECT" ? (
                                         <><span style={{ fontFamily: saved?.font, fontSize: "18px" }}>{saved.signature}</span></>
                                     ) : (
                                         <img
@@ -650,7 +650,7 @@ const TagsCon: React.FC<TagsConProps> = ({
 
                         {/* INITIALS FIELD - START */}
                         {
-                            item.type === "INITIALS" &&
+                            item.type == "INITIALS" &&
                             <div
                                 tabIndex={1}
                                 id={item.navigationOrder}
@@ -660,7 +660,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                             >
                                 {((!transparentTags && !hideTags) && !(saved.save &&
                                     (
-                                        (item.id !== null && item.id !== undefined && item.id !== "")
+                                        (item.id != null && item.id != undefined && item.id != "")
                                             ? (
                                                 (`${item.id}`) in signConfObj && signConfObj[`${item.id}`].accepted
                                             ) : (
@@ -669,7 +669,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                                     )
                                 )) ?
                                     <TbSignature className="text-lg text-slate-600" />
-                                    : saved && saved.saveType !== null && saved.saveType === "SELECT" ? (
+                                    : saved && saved.saveType != null && saved.saveType == "SELECT" ? (
                                         <><span style={{ fontFamily: saved?.font }}>{saved.initial}</span></>
                                     ) :
                                         (<img
@@ -689,7 +689,7 @@ const TagsCon: React.FC<TagsConProps> = ({
 
                         {/* STAMP FIELD - START */}
                         {
-                            item.type === "STAMP" &&
+                            item.type == "STAMP" &&
                             <div
                                 tabIndex={1}
                                 id={item.navigationOrder}
@@ -708,7 +708,7 @@ const TagsCon: React.FC<TagsConProps> = ({
 
                         {/* IMAGE FIELD - START */}
                         {
-                            item.type === "FILE" &&
+                            item.type == "FILE" &&
                             <div
                                 tabIndex={1}
                                 id={item.navigationOrder}
@@ -728,7 +728,7 @@ const TagsCon: React.FC<TagsConProps> = ({
 
                         {/* SELECT FIELD - START */}
                         {
-                            item.type === "SELECT" &&
+                            item.type == "SELECT" &&
                             <div
                                 id={item.navigationOrder}
                                 tabIndex={1}
@@ -765,14 +765,14 @@ const TagsCon: React.FC<TagsConProps> = ({
                         {/* TEMPORAL FIELD - START */}
 
                         {
-                            item.type === "TEMPORAL" &&
+                            item.type == "TEMPORAL" &&
                             <div
                                 id={item.navigationOrder}
                                 tabIndex={1}
                                 className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none" : "bg-slate-200 shadow-sm border-slate-100"}`}
                             >
                                 <p
-                                    style={{ opacity: `${item.id === isDateOpen ? "0" : "100"}` }}
+                                    style={{ opacity: `${item.id == isDateOpen ? "0" : "100"}` }}
                                     className="w-full h-full rounded pl-1 pt-1 whitespace-nowrap">
                                     {(item.id && item.id in dateValues) ? dateValues[item.id] : item.value ? item.value : item.dateFormat?.toLowerCase()}
                                 </p>
@@ -786,7 +786,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                                         let val = e.target.value;
 
                                         // Adding dummy time in case of time as it giving Invalid date without that
-                                        if (item.dateFormat?.toLowerCase() === "time") val = "09/02/2025 " + val
+                                        if (item.dateFormat?.toLowerCase() == "time") val = "09/02/2025 " + val
 
                                         if (!item.id) return;
                                         setIsDateOpen(null);
@@ -799,12 +799,12 @@ const TagsCon: React.FC<TagsConProps> = ({
                                         const val = e.currentTarget.value;
                                         handleTagUpdate(index, val as string);
                                     }}
-                                    style={{ opacity: `${item.id === isDateOpen ? "100" : "0"}` }}
+                                    style={{ opacity: `${item.id == isDateOpen ? "100" : "0"}` }}
                                     className="w-full px-2 outline-none absolute"
                                     onClick={() => {
 
                                     }}
-                                    type={`${item.dateFormat?.toLowerCase() === "date" ? "date" : (item.dateFormat?.toLowerCase() === "time" ? "time" : "datetime-local")}`}
+                                    type={`${item.dateFormat?.toLowerCase() == "date" ? "date" : (item.dateFormat?.toLowerCase() == "time" ? "time" : "datetime-local")}`}
                                 />
 
                             </div>
@@ -815,7 +815,7 @@ const TagsCon: React.FC<TagsConProps> = ({
 
                         {/* Attachment Field - START */}
                         {
-                            item.type.toLowerCase() === TagsTypes.ATTACHMENT &&
+                            item.type.toLowerCase() == TagsTypes.ATTACHMENT &&
                             <div
                                 tabIndex={1}
                                 id={item.navigationOrder}
@@ -844,7 +844,7 @@ const TagsCon: React.FC<TagsConProps> = ({
 
                         {/* Focus Show Element */}
                         {
-                            (!transparentTags && !hideTags) && (focusElement && focusElement.documentId === item.documentId && focusElement.focusElementIndx === index) &&
+                            (!transparentTags && !hideTags) && (focusElement && focusElement.documentId == item.documentId && focusElement.focusElementIndx == index) &&
                             <>
                                 {/* <div
                                                                                             className="absolute left-0 z-50 bg-blue-900 text-xs text-slate-100 px-2 py-[2px] rounded-sm whitespace-nowrap"
diff --git a/src/components/client/draft.save.jsx b/src/components/client/draft.save.jsx
index 3dfb648..1fac566 100644
--- a/src/components/client/draft.save.jsx
+++ b/src/components/client/draft.save.jsx
@@ -9,12 +9,12 @@
                             SME
                         </Link>
                         <div className="h-6 sm:h-8 w-px bg-gray-300"></div>
-                        {recSignStatus === "COMPLETED" && (
+                        {recSignStatus == "COMPLETED" && (
                             <h1 className="text-sm sm:text-md text-gray-800">
                                 🎉 The document has been signed successfully!
                             </h1>
                         )}
-                        {recSignStatus === "DECLINED" && (
+                        {recSignStatus == "DECLINED" && (
                             <h1 className="text-sm sm:text-md text-gray-800">
                                 ❌ The document has been declined by you.
                             </h1>
@@ -26,23 +26,23 @@
                         <div className="mx-auto w-full max-w-6xl">
                             {/* Banner */}
                             <div className="flex items-center gap-3 sm:gap-4 mb-4 bg-slate-100 p-4 rounded-md">
-                                {recSignStatus === "COMPLETED" && (
+                                {recSignStatus == "COMPLETED" && (
                                     <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-teal-500 to-green-400 rounded-full flex items-center justify-center shadow-sm">
                                         <FaCheck className="text-white text-xl sm:text-2xl" />
                                     </div>
                                 )}
-                                {recSignStatus === "DECLINED" && (
+                                {recSignStatus == "DECLINED" && (
                                     <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-red-400 to-red-500 rounded-full flex items-center justify-center shadow-sm">
                                         <ImCancelCircle className="text-white text-xl sm:text-2xl" />
                                     </div>
                                 )}
                                 <div>
-                                    {recSignStatus === "COMPLETED" && (
+                                    {recSignStatus == "COMPLETED" && (
                                         <p className="text-lg sm:text-2xl font-medium text-[var(--primary)]">
                                             You have successfully signed the document.
                                         </p>
                                     )}
-                                    {recSignStatus === "DECLINED" && (
+                                    {recSignStatus == "DECLINED" && (
                                         <p className="text-lg sm:text-2xl font-medium text-[var(--primary)]">
                                             You have declined the document.
                                         </p>
@@ -82,7 +82,7 @@
                                                                     doc.pages.map((page, indx) => {
                                                                         const key = `${doc.documentId}_${page.index}`
                                                                         const currDocTags = droppedItems.filter(
-                                                                            (val) => val.pageIndex === page.index
+                                                                            (val) => val.pageIndex == page.index
                                                                         )
                                                                         return (
                                                                             <div
@@ -166,7 +166,7 @@
                                     >
                                         Visit Sign Made Easy
                                     </Link>
-                                    {recSignStatus === "DECLINED" && (
+                                    {recSignStatus == "DECLINED" && (
                                         <p className="italic text-slate-400 text-center mt-2 cursor-pointer hover:underline">
                                             Report Sender ?
                                         </p>
diff --git a/src/components/contacts/Contacts.tsx b/src/components/contacts/Contacts.tsx
index 8c08137..b6d85cb 100644
--- a/src/components/contacts/Contacts.tsx
+++ b/src/components/contacts/Contacts.tsx
@@ -46,7 +46,7 @@ const Contacts = () => {
     }, [activeAccountId]);
 
     const handleEdit = (contactId) => {
-        let jsonEditData = contacts.find((prev) => prev.id === contactId)
+        let jsonEditData = contacts.find((prev) => prev.id == contactId)
         setEditJsonData(jsonEditData)
         setActionStatus("Edit")
         setShowModal((prev) => !prev)
@@ -74,7 +74,7 @@ const Contacts = () => {
     const toggleMenu = (contactId) => {
         // Cancel any pending blur timeout (prevents blinking)
         clearTimeout(blurTimeoutRef.current);
-        setOpenMenuId((prevId) => (prevId === contactId ? null : contactId));
+        setOpenMenuId((prevId) => (prevId == contactId ? null : contactId));
     };
 
     const handleBlur = () => {
@@ -87,12 +87,12 @@ const Contacts = () => {
         try {
             let res;
             setCreateAndInviteLoader(true);
-            if (type === 'Edit') {
+            if (type == 'Edit') {
                 res = await api.put(`/api/v1/accounts/${activeAccountId}/contacts`, {contacts: [data], empty: true})
             } else {
                 res = await api.post(`/api/v1/accounts/${activeAccountId}/contacts`, {contacts: [data], empty: true});
             }
-            if (res.status === 200) {
+            if (res.status == 200) {
                 // toast.success('Contact created successfully!', {
                 //     position: "top-center",
                 //     autoClose: 1500,
@@ -149,7 +149,7 @@ const Contacts = () => {
                                         <Loader />
                                     </td>
                                 </tr>
-                            ) : contacts.length === 0 ? (
+                            ) : contacts.length == 0 ? (
                                 <tr>
                                     <td colSpan="4" className="text-center py-10 text-gray-500">
                                         <div className="flex flex-col items-center justify-center">
@@ -183,9 +183,9 @@ const Contacts = () => {
                                                     <FaEllipsisV />
                                                 </button>
 
-                                                {openMenuId === contact.id && (
+                                                {openMenuId == contact.id && (
                                                     <div
-                                                        className={`absolute mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-20 min-w-[100px] ${contacts.length - 1 === index
+                                                        className={`absolute mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-20 min-w-[100px] ${contacts.length - 1 == index
                                                                 ? "bottom-1 right-4"
                                                                 : "bottom-0 right-5"
                                                             }`}
diff --git a/src/components/contacts/ContactsFormModal.tsx b/src/components/contacts/ContactsFormModal.tsx
index 05e7c78..35c52e1 100644
--- a/src/components/contacts/ContactsFormModal.tsx
+++ b/src/components/contacts/ContactsFormModal.tsx
@@ -41,7 +41,7 @@ const ContactFormModal = ({
   const [errors, setErrors] = useState<{ [key: string]: string }>({});
 
   useEffect(() => {
-    if (actionStatus === "Edit" && editJsonData) {
+    if (actionStatus == "Edit" && editJsonData) {
       setFormData({
         email: editJsonData.email,
         firstName: editJsonData.firstName,
@@ -78,7 +78,7 @@ const ContactFormModal = ({
   // };
 
   // const removePhoneField = (index: number) => {
-  //     const updatedPhones = formData.phones.filter((_, i) => i !== index);
+  //     const updatedPhones = formData.phones.filter((_, i) => i != index);
   //     setFormData((prev) => ({ ...prev, phones: updatedPhones }));
   // };
 
@@ -141,7 +141,7 @@ const ContactFormModal = ({
       return;
     }
     try {
-      if (actionStatus === "Edit") {
+      if (actionStatus == "Edit") {
         type = "Edit";
         payload = {
           ...formData,
diff --git a/src/components/dashboard/Dashboard.tsx b/src/components/dashboard/Dashboard.tsx
index db30aa0..d9e2339 100644
--- a/src/components/dashboard/Dashboard.tsx
+++ b/src/components/dashboard/Dashboard.tsx
@@ -37,13 +37,13 @@ function Dashboard() {
 
     // Check if cookie already exists - Redirect to Dashboard
     useLayoutEffect(() => {
-        if (transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS || transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED || transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_FAILURE) {
+        if (transactionStatus == TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS || transactionStatus == TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED || transactionStatus == TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_FAILURE) {
            
             dispatch(resetSelDoc())
             dispatch(resetSelRecipient())
             dispatch(clearTransaction())
 
-            if (transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS) {
+            if (transactionStatus == TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS) {
                 setShowConfetti(true)
             }
 
@@ -52,22 +52,22 @@ function Dashboard() {
     }, [])
 
     useEffect(() => {
-        if (transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS || transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED) return;
+        if (transactionStatus == TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS || transactionStatus == TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED) return;
 
-        if (selectedDocuments === null || (Array.isArray(selectedDocuments) && !selectedDocuments.length)) {
+        if (selectedDocuments == null || (Array.isArray(selectedDocuments) && !selectedDocuments.length)) {
             dispatch(resetSelDoc())
         }
         dispatch(showLoader("Loading ..."));
 
-        if (documentSignType && transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_NOT_INITIATED) {
-            if (documentSignType === 'self-sign') {
+        if (documentSignType && transactionStatus == TRANSACTION_STATUS_ENUMS.TRANSACTION_NOT_INITIATED) {
+            if (documentSignType == 'self-sign') {
                 setTimeout(() => {
-                    navigate('/process-step-one');
+                    navigate('/setup-transaction');
                 }, 1000)
                 return
-            } else if (documentSignType === 'multiple-sign') {
+            } else if (documentSignType == 'multiple-sign') {
                 setTimeout(() => {
-                    navigate('/process-step-one');
+                    navigate('/setup-transaction');
                 }, 1000)
                 return
             }
diff --git a/src/components/dashboard/NavLink.tsx b/src/components/dashboard/NavLink.tsx
index 3638471..c082eda 100644
--- a/src/components/dashboard/NavLink.tsx
+++ b/src/components/dashboard/NavLink.tsx
@@ -24,7 +24,7 @@ interface NavLinkProps {
 const NavLink: React.FC<NavLinkProps> = ({ to, icon, label, showSideBar, menuPathMap }) => {
 
   const location = useLocation();
-  const isActive = menuPathMap[location.pathname] === label;
+  const isActive = menuPathMap[location.pathname] == label;
 
   // const [transactionFilter, setTransationFilter] = useState<TransactionFilterEnum>(TransactionFilterEnum.ALL)
 
@@ -47,7 +47,7 @@ const NavLink: React.FC<NavLinkProps> = ({ to, icon, label, showSideBar, menuPat
 export default NavLink;
 
 
-// {label === "Transactions" ? <div>
+// {label == "Transactions" ? <div>
 //         <Link
 //           to={to + "/all"}
 //           className={`${isActive ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} 
@@ -63,77 +63,77 @@ export default NavLink;
 //         >
 //           <Link
 //             to={to + "/all"}
-//             className={`px-2 py-1 mt-1 ${transactionFilter === TransactionFilterEnum.ALL ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
+//             className={`px-2 py-1 mt-1 ${transactionFilter == TransactionFilterEnum.ALL ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
 //             onClick={() => setTransationFilter(TransactionFilterEnum.ALL)}
 //           >
 //             {showSideBar && <p className="text-[0.8rem]">All</p>}
-//             {transactionFilter === TransactionFilterEnum.ALL && <IoIosArrowRoundForward />}
+//             {transactionFilter == TransactionFilterEnum.ALL && <IoIosArrowRoundForward />}
 //           </Link>
 
 //           <Link
 //             to={to + "/draft"}
-//             className={`px-2 py-1 mt-1 ${transactionFilter === TransactionFilterEnum.DRAFT ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
+//             className={`px-2 py-1 mt-1 ${transactionFilter == TransactionFilterEnum.DRAFT ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
 //             onClick={() => setTransationFilter(TransactionFilterEnum.DRAFT)}
 //           >
 //             {showSideBar && <p className="text-[0.8rem]">Draft</p>}
-//             {transactionFilter === TransactionFilterEnum.DRAFT && <IoIosArrowRoundForward />}
+//             {transactionFilter == TransactionFilterEnum.DRAFT && <IoIosArrowRoundForward />}
 //           </Link>
 
 //           <Link
 //             to={to + "/sent"}
-//             className={`px-2 py-1 mt-1 ${transactionFilter === TransactionFilterEnum.SENT ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
+//             className={`px-2 py-1 mt-1 ${transactionFilter == TransactionFilterEnum.SENT ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
 //             onClick={() => setTransationFilter(TransactionFilterEnum.SENT)}
 //           >
 //             {showSideBar && <p className="text-[0.8rem]">Sent</p>}
-//             {transactionFilter === TransactionFilterEnum.SENT && <IoIosArrowRoundForward />}
+//             {transactionFilter == TransactionFilterEnum.SENT && <IoIosArrowRoundForward />}
 //           </Link>
 
 //           <Link
 //             to={to + "/complete"}
-//             className={`px-2 py-1 my-1 ${transactionFilter === TransactionFilterEnum.COMPLETE ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
+//             className={`px-2 py-1 my-1 ${transactionFilter == TransactionFilterEnum.COMPLETE ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
 //             onClick={() => setTransationFilter(TransactionFilterEnum.COMPLETE)}
 //           >
 //             {showSideBar && <p className="text-[0.8rem]">Completed</p>}
-//             {transactionFilter === TransactionFilterEnum.COMPLETE && <IoIosArrowRoundForward />}
+//             {transactionFilter == TransactionFilterEnum.COMPLETE && <IoIosArrowRoundForward />}
 //           </Link>
 
 //           <Link
 //             to={to + "/declined"}
-//             className={`px-2 py-1 my-1 ${transactionFilter === TransactionFilterEnum.DECLINED ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
+//             className={`px-2 py-1 my-1 ${transactionFilter == TransactionFilterEnum.DECLINED ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
 //             onClick={() => setTransationFilter(TransactionFilterEnum.DECLINED)}
 //           >
 //             {showSideBar && <p className="text-[0.8rem]">Declined</p>}
-//             {transactionFilter === TransactionFilterEnum.DECLINED && <IoIosArrowRoundForward />}
+//             {transactionFilter == TransactionFilterEnum.DECLINED && <IoIosArrowRoundForward />}
 //           </Link>
 
 
 //           <Link
 //             to={to + "/discarded"}
-//             className={`px-2 py-1 my-1 ${transactionFilter === TransactionFilterEnum.DISCARDED ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
+//             className={`px-2 py-1 my-1 ${transactionFilter == TransactionFilterEnum.DISCARDED ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
 //             onClick={() => setTransationFilter(TransactionFilterEnum.DISCARDED)}
 //           >
 //             {showSideBar && <p className="text-[0.8rem]">Discarded</p>}
-//             {transactionFilter === TransactionFilterEnum.DISCARDED && <IoIosArrowRoundForward />}
+//             {transactionFilter == TransactionFilterEnum.DISCARDED && <IoIosArrowRoundForward />}
 //           </Link>
 
 
 //           <Link
 //             to={to + "/canceled"}
-//             className={`px-2 py-1 my-1 ${transactionFilter === TransactionFilterEnum.CANCELED ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
+//             className={`px-2 py-1 my-1 ${transactionFilter == TransactionFilterEnum.CANCELED ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
 //             onClick={() => setTransationFilter(TransactionFilterEnum.CANCELED)}
 //           >
 //             {showSideBar && <p className="text-[0.8rem]">Canceled</p>}
-//             {transactionFilter === TransactionFilterEnum.CANCELED && <IoIosArrowRoundForward />}
+//             {transactionFilter == TransactionFilterEnum.CANCELED && <IoIosArrowRoundForward />}
 //           </Link>
 
 
 //           <Link
 //             to={to + "/expired"}
-//             className={`px-2 py-1 my-1 ${transactionFilter === TransactionFilterEnum.EXPIRED ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
+//             className={`px-2 py-1 my-1 ${transactionFilter == TransactionFilterEnum.EXPIRED ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
 //             onClick={() => setTransationFilter(TransactionFilterEnum.EXPIRED)}
 //           >
 //             {showSideBar && <p className="text-[0.8rem]">Expired</p>}
-//             {transactionFilter === TransactionFilterEnum.EXPIRED && <IoIosArrowRoundForward />}
+//             {transactionFilter == TransactionFilterEnum.EXPIRED && <IoIosArrowRoundForward />}
 //           </Link>
 
 
diff --git a/src/components/dashboard/SendForSign.tsx b/src/components/dashboard/SendForSign.tsx
index fe4a877..2f051f8 100644
--- a/src/components/dashboard/SendForSign.tsx
+++ b/src/components/dashboard/SendForSign.tsx
@@ -26,7 +26,7 @@ const SendForSign: React.FC<Props> = ({ showSideBar }) => {
     const user = useSelector((state: RootState) => state.user);
 
     useEffect(() => {
-        if (!user.account || user.account === null) {
+        if (!user.account || user.account == null) {
             window.location.href = "/login";
             return;
         }
@@ -40,11 +40,11 @@ const SendForSign: React.FC<Props> = ({ showSideBar }) => {
 
         api.post(`/api/v1/accounts/${defaultAccountId}/transactions`)
             .then(res => {
-                if (res.status === 200 || res.status === 201) {
+                if (res.status == 200 || res.status == 201) {
                     dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED));
                     dispatch(setTransactionId(res.data.id));
-                    let navigateUrl = `/process-step-one/${defaultAccountId}/${res.data.id}`;
-                    if (signType === SignTypeEnum.selfSign) navigateUrl = `/process-step-one/${defaultAccountId}/${res.data.id}/self_sign`;
+                    let navigateUrl = `/setup-transaction/${defaultAccountId}/${res.data.id}`;
+                    if (signType == SignTypeEnum.selfSign) navigateUrl = `/setup-transaction/${defaultAccountId}/${res.data.id}/self_sign`;
                     setTimeout(() => navigate(navigateUrl), 0)
                 }
             })
@@ -52,8 +52,8 @@ const SendForSign: React.FC<Props> = ({ showSideBar }) => {
     }
 
     // const handleSendSignDispatch: (type: "self-sign" | "multiple-sign") => void = (signType) => {
-    //     if (selectedDocuments === null || !selectedDocuments.length) {
-    //         if (selectedDocuments === null || !selectedDocuments.length) {
+    //     if (selectedDocuments == null || !selectedDocuments.length) {
+    //         if (selectedDocuments == null || !selectedDocuments.length) {
     //             toast.dismiss();
     //             toast.error("Select 📄 Documents first!", {
     //                 position: "bottom-right",
diff --git a/src/components/home/Cards.tsx b/src/components/home/Cards.tsx
index 11bdd1f..21dc778 100644
--- a/src/components/home/Cards.tsx
+++ b/src/components/home/Cards.tsx
@@ -106,7 +106,7 @@ const Cards: React.FC<CardsProps> = ({ type = 'dashboard', onOpenModal, onDateRa
   // useEffect(() => {
   //   setIsLoading(true);
   //   setTimeout(() => {
-  //     if (type === 'account') {
+  //     if (type == 'account') {
   //       setShowCards(AccountData);
   //     } else {
   //       setShowCards(cards);
@@ -117,7 +117,7 @@ const Cards: React.FC<CardsProps> = ({ type = 'dashboard', onOpenModal, onDateRa
 
   useEffect(() => {
 
-    if (type === 'dashboard') {
+    if (type == 'dashboard') {
       const now = new Date();
       let fromDate = new Date();
 
diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
index 04bb801..1c39c8d 100644
--- a/src/components/home/Home.tsx
+++ b/src/components/home/Home.tsx
@@ -120,7 +120,7 @@ const Home = () => {
     // Listen for sessionStorage changes
     useEffect(() => {
         const handleStorageChange = (e: StorageEvent) => {
-            if (e.key === 'activeAccountId') {
+            if (e.key == 'activeAccountId') {
                 const newActiveAccountId = e.newValue ? JSON.parse(e.newValue) : null;
                 setActiveAccountId(newActiveAccountId);
             }
@@ -131,7 +131,7 @@ const Home = () => {
 
         // Custom event listener for same-tab changes
         const handleCustomStorageChange = (e: CustomEvent) => {
-            if (e.detail.key === 'activeAccountId') {
+            if (e.detail.key == 'activeAccountId') {
                 setActiveAccountId(e.detail.newValue);
             }
         };
diff --git a/src/components/home/ShowDocs.tsx b/src/components/home/ShowDocs.tsx
index 9bca9cf..4d1b88f 100644
--- a/src/components/home/ShowDocs.tsx
+++ b/src/components/home/ShowDocs.tsx
@@ -24,7 +24,7 @@ const ShowDocs = () => {
     // Handle checkbox selection
     const handleSelect = (docId: string) => {
         setSelectedDocs((prev) =>
-            prev.includes(docId) ? prev.filter((id) => id !== docId) : [...prev, docId]
+            prev.includes(docId) ? prev.filter((id) => id != docId) : [...prev, docId]
         );
     };
 
@@ -37,7 +37,7 @@ const ShowDocs = () => {
     // Updating Redux State When Anywhere Sign Type is set ["self-sign" | "multiple-sign"]
 
     useEffect(() => {
-        // if (signTypeGlobalState === null) return;
+        // if (signTypeGlobalState == null) return;
         handleUpdateSelectedDocs()
     }, [selectedDocs])
 
@@ -45,7 +45,7 @@ const ShowDocs = () => {
     // useEffect(() => {
     //     setTimeout(async () => {
     //         const res = await dispatch(fetchDocuments());
-    //         if (res.meta.requestStatus === "rejected") {
+    //         if (res.meta.requestStatus == "rejected") {
     //             Object.keys(localStorage).forEach((key) => {
     //                 if (key.startsWith("persist:root-")) {
     //                     localStorage.removeItem(key);
@@ -70,7 +70,7 @@ const ShowDocs = () => {
                                     onChange={() => handleSelect(doc.id)}
                                 />
                                 <div className="flex gap-2 items-center">
-                                    {doc.extension === "pdf" ? (
+                                    {doc.extension == "pdf" ? (
                                         <BsFiletypePdf className="text-lg text-red-400" />
                                     ) : (
                                         <BsFiletypeDocx className="text-lg text-blue-400" />
@@ -118,7 +118,7 @@ const ShowDocs = () => {
                                     </td>
                                     <td className="px-4 py-3">
                                         <label htmlFor={doc.name + idx} className="flex items-center gap-2 cursor-pointer">
-                                            {doc.extension === "pdf" ? (
+                                            {doc.extension == "pdf" ? (
                                                 <BsFiletypePdf className="text-xl text-red-500" />
                                             ) : (
                                                 <BsFiletypeDocx className="text-xl text-blue-500" />
diff --git a/src/components/home/StartNow.tsx b/src/components/home/StartNow.tsx
index 3c5fd97..1500914 100644
--- a/src/components/home/StartNow.tsx
+++ b/src/components/home/StartNow.tsx
@@ -46,7 +46,7 @@ const StartNow = () => {
             .then((res) => {
                 // toast.dismiss();
                 setFiles([]);
-                navigate(`/process-step-one/${accountId}/${transactionId}`);
+                navigate(`/setup-transaction/${accountId}/${transactionId}`);
             })
             .catch((err) => {
                 console.error("Upload failed", err);
diff --git a/src/components/home/StartSection.tsx b/src/components/home/StartSection.tsx
index 5b90b45..9bf7037 100644
--- a/src/components/home/StartSection.tsx
+++ b/src/components/home/StartSection.tsx
@@ -52,7 +52,7 @@ const StartSection = () => {
     );
 
     const user = useSelector((state: RootState) => state.user);
-    if (!user.account || user.account === null) {
+    if (!user.account || user.account == null) {
         window.location.href = "/login";
         return;
     }
@@ -60,13 +60,13 @@ const StartSection = () => {
     const defaultAccountId = user.account.id;
 
     const handleStartSectionClick = (link: string) => {
-        // if ("buttonText" in card && card.buttonText === "Start Now") {
+        // if ("buttonText" in card && card.buttonText == "Start Now") {
         //     api.post(`/api/v1/accounts/${defaultAccountId}/transactions`)
         //         .then(res => {
-        //             if (res.status === 200 || res.status === 201) {
+        //             if (res.status == 200 || res.status == 201) {
         //                 dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED));
         //                 dispatch(setTransactionId(res.data));
-        //                 setTimeout(() => navigate(`/process-step-one/${defaultAccountId}/${res.data.id}`), 0)
+        //                 setTimeout(() => navigate(`/setup-transaction/${defaultAccountId}/${res.data.id}`), 0)
         //             }
         //         })
         //         .catch(err => console.log(err))
@@ -89,7 +89,7 @@ const StartSection = () => {
     // Listen for sessionStorage changes
     useEffect(() => {
         const handleStorageChange = (e: StorageEvent) => {
-            if (e.key === 'activeAccountId') {
+            if (e.key == 'activeAccountId') {
                 const newActiveAccountId = e.newValue ? JSON.parse(e.newValue) : null;
                 setActiveAccountId(newActiveAccountId);
             }
@@ -100,7 +100,7 @@ const StartSection = () => {
 
         // Custom event listener for same-tab changes
         const handleCustomStorageChange = (e: CustomEvent) => {
-            if (e.detail.key === 'activeAccountId') {
+            if (e.detail.key == 'activeAccountId') {
                 setActiveAccountId(e.detail.newValue);
             }
         };
diff --git a/src/components/home/UploadDoc.tsx b/src/components/home/UploadDoc.tsx
index 75e1125..eab7306 100644
--- a/src/components/home/UploadDoc.tsx
+++ b/src/components/home/UploadDoc.tsx
@@ -85,7 +85,7 @@ const UploadDoc: React.FC = () => {
                                     >
                                         <span className="truncate text-sm text-gray-800 max-w-[85%]">{file.name}</span>
                                         <MdCancel
-                                            onClick={() => setFiles(files.filter((_, i) => i !== index))}
+                                            onClick={() => setFiles(files.filter((_, i) => i != index))}
                                             className="text-gray-400 hover:text-red-500 cursor-pointer transition"
                                         />
                                     </div>
diff --git a/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx b/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx
index 23fec71..6084144 100644
--- a/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx
+++ b/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx
@@ -157,7 +157,7 @@ const SigningOrderDiagram: React.FC<{ signers: Signer[] }> = ({ signers }) => {
                                             if (signer.completed) {
                                                 bgColor = "bg-[var(--primary)]";
                                                 icon = <FaCheck className="text-green-600" />;
-                                            } else if (order === currentProcessingOrder) {
+                                            } else if (order == currentProcessingOrder) {
                                                 bgColor = "bg-yellow-500";
                                                 icon = <FaClock className="text-yellow-800" />;
                                             } else {
@@ -221,8 +221,8 @@ const DocumentSubmissionOptions = () => {
 
 
     useEffect(() => {
-        selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }));
-        selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
+        selectedRecipients.length == 0 && dispatch(fetchRecipients({ accountId, transactionId }));
+        selectedDocuments.length == 0 && dispatch(fetchDocuments({ accountId, transactionId }));
     }, [])
 
     useEffect(() => {
@@ -275,9 +275,9 @@ const DocumentSubmissionOptions = () => {
         }
     }, [accountId, transactionId]);
 
-    // Step 2: Prevent browser back when status === 'SENT'
+    // Step 2: Prevent browser back when status == 'SENT'
     useEffect(() => {
-        if (status === "SENT") {
+        if (status == "SENT") {
 
             const currentPath = window.location.pathname;
 
diff --git a/src/components/process/CompletionScreen/SignerList.tsx b/src/components/process/CompletionScreen/SignerList.tsx
index 158e8c4..939c1ce 100644
--- a/src/components/process/CompletionScreen/SignerList.tsx
+++ b/src/components/process/CompletionScreen/SignerList.tsx
@@ -17,7 +17,7 @@ export const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
 
             <div className="overflow-y-auto no-scrollbar">
                 {signers.map((signer, indx) => (
-                    <div key={signer.id} className={`text-sm flex items-center gap-4 ${indx !== signers.length-1 ?  "border-b-1 border-gray-200" : ""} py-4`}>
+                    <div key={signer.id} className={`text-sm flex items-center gap-4 ${indx != signers.length-1 ?  "border-b-1 border-gray-200" : ""} py-4`}>
                         <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-medium">
                             {/* {signer.name.split(" ").length > 2 ? signer.name.split(" ").map(n => n[0].toUpperCase()).join("") : signer.name[0].toUpperCase()} */}
                         
diff --git a/src/components/process/CompletionScreen/SigningOrderDiagram.tsx b/src/components/process/CompletionScreen/SigningOrderDiagram.tsx
index 046874e..b183c26 100644
--- a/src/components/process/CompletionScreen/SigningOrderDiagram.tsx
+++ b/src/components/process/CompletionScreen/SigningOrderDiagram.tsx
@@ -75,7 +75,7 @@ export const SigningOrderDiagram: React.FC<{ signers: Signer[] }> = ({ signers }
                                             if (signer.completed) {
                                                 bgColor = "bg-[var(--primary)]";
                                                 icon = <FaCheck className="text-green-600" />;
-                                            } else if (order === currentProcessingOrder) {
+                                            } else if (order == currentProcessingOrder) {
                                                 bgColor = "bg-yellow-500";
                                                 icon = <FaClock className="text-yellow-800" />;
                                             } else {
diff --git a/src/components/process/CompletionScreen/TransactionSentSuccess.tsx b/src/components/process/CompletionScreen/TransactionSentSuccess.tsx
index 99f31be..adc1730 100644
--- a/src/components/process/CompletionScreen/TransactionSentSuccess.tsx
+++ b/src/components/process/CompletionScreen/TransactionSentSuccess.tsx
@@ -28,13 +28,13 @@ const TransactionSentSuccess = () => {
   }
 
   useEffect(() => {
-    selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }))
-    selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }))
+    selectedRecipients.length == 0 && dispatch(fetchRecipients({ accountId, transactionId }))
+    selectedDocuments.length == 0 && dispatch(fetchDocuments({ accountId, transactionId }))
     setIsVisible(true)
   }, [])
 
   useEffect(() => {
-    if (selectedRecipients.length === 0) return
+    if (selectedRecipients.length == 0) return
 
     let minRoutingOrder: number = Infinity
     let userEmailPresent = {
@@ -50,19 +50,19 @@ const TransactionSentSuccess = () => {
         minRoutingOrder = recipient.routingOrder
       }
 
-      if (recipient.email === userDetails.email) {
+      if (recipient.email == userDetails.email) {
         userEmailPresent.present = true
         userEmailPresent.routingOrder = recipient.routingOrder
-        userEmailPresent.recipientId = Number(recipient.id)
+        userEmailPresent.recipientId = recipient.id
         userEmailPresent.type = recipient.type
       }
     }
 
     if (
       userEmailPresent.present &&
-      userEmailPresent.routingOrder === minRoutingOrder &&
-      userEmailPresent.type !== recipientType.CC &&
-      userEmailPresent.type !== recipientType.INPERSONSIGNER
+      userEmailPresent.routingOrder == minRoutingOrder &&
+      userEmailPresent.type != recipientType.CC &&
+      userEmailPresent.type != recipientType.INPERSONSIGNER
     ) {
       setSelfUserSign({ sign: true, recipientId: userEmailPresent.recipientId })
     }
diff --git a/src/components/process/processStepOne/AdvancedOptions.tsx b/src/components/process/processStepOne/AdvancedOptions.tsx
index b6a510f..56f8108 100644
--- a/src/components/process/processStepOne/AdvancedOptions.tsx
+++ b/src/components/process/processStepOne/AdvancedOptions.tsx
@@ -55,7 +55,7 @@ const AdvancedOptions: React.FC<AdvancedOptionsProps> = ({ accountId, setShowAdv
 
         let changes : any = {}
         for (const [key, val] of Object.entries(transactionDetails)) {
-            if(transactionFormData[key as keyof TransactionDetailsInt] === transactionDetails[key as keyof TransactionDetailsInt]) continue
+            if(transactionFormData[key as keyof TransactionDetailsInt] == transactionDetails[key as keyof TransactionDetailsInt]) continue
             changes[key as keyof TransactionDetailsInt] = val
         }
 
diff --git a/src/components/process/processStepOne/ContactModal.tsx b/src/components/process/processStepOne/ContactModal.tsx
index 853bc56..6199505 100644
--- a/src/components/process/processStepOne/ContactModal.tsx
+++ b/src/components/process/processStepOne/ContactModal.tsx
@@ -24,7 +24,7 @@ const highlightText = (text: string, searchTerm: string, shouldHighlight: boolea
     const textLower = text.toLowerCase();
     const index = textLower.indexOf(searchTermLower);
     
-    if (index === -1) {
+    if (index == -1) {
         return <span>{text}</span>;
     }
 
@@ -67,7 +67,7 @@ const ContactModal: React.FC<ContactDataProps> = ({
     };
 
     const handleKeyDown = (event: React.KeyboardEvent, indx: number) => {
-        if (event.key === 'Enter' || event.key === ' ') {
+        if (event.key == 'Enter' || event.key == ' ') {
             event.preventDefault();
             handleContactClick(indx);
         }
@@ -101,14 +101,14 @@ const ContactModal: React.FC<ContactDataProps> = ({
                                 {highlightText(
                                     contact.firstName, 
                                     inpFirstName, 
-                                    contactData.type === "firstName"
+                                    contactData.type == "firstName"
                                 )}
                             </p>
                             <p className="text-sm font-semibold text-gray-900 truncate">
                                 {highlightText(
                                     contact.lastName, 
                                     inpLastName, 
-                                    contactData.type === "lastName"
+                                    contactData.type == "lastName"
                                 )}
                             </p>
                         </div>
@@ -116,7 +116,7 @@ const ContactModal: React.FC<ContactDataProps> = ({
                             {highlightText(
                                 contact.email, 
                                 inpEmail, 
-                                contactData.type === "email"
+                                contactData.type == "email"
                             )}
                         </p>
                     </div>
@@ -124,7 +124,7 @@ const ContactModal: React.FC<ContactDataProps> = ({
             ))}
             
             {/* No results message */}
-            {contactData.contacts.length === 0 && (
+            {contactData.contacts.length == 0 && (
                 <div className="px-3 py-4 text-center text-gray-500 text-sm">
                     No contacts found
                 </div>
diff --git a/src/components/process/processStepOne/DocumentCard.tsx b/src/components/process/processStepOne/DocumentCard.tsx
index 0e9755e..8acc1e0 100644
--- a/src/components/process/processStepOne/DocumentCard.tsx
+++ b/src/components/process/processStepOne/DocumentCard.tsx
@@ -98,7 +98,7 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted, tran
       return;
     }
     const res = await api.delete(`/api/v1/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/documents/${docId}`)
-    if (res.status === 202) {
+    if (res.status == 202) {
       dispatch(deleteDocument(docId));
       setDocumentDel({ docId: null, isDel: false });
     }
@@ -171,7 +171,7 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted, tran
 
 
       {
-        documentDel.docId !== null && <div className="fixed inset-0 backdrop-blur-sm flex items-center justify-center z-50">
+        documentDel.docId != null && <div className="fixed inset-0 backdrop-blur-sm flex items-center justify-center z-50">
           <div className="bg-white rounded-lg p-6 w-80">
             <h3 className="text-lg font-medium text-gray-800 mb-4">Confirm Delete</h3>
             <p className="text-gray-600 mb-6">Are you sure you want to delete?</p>
diff --git a/src/components/process/processStepOne/MessageCon.tsx b/src/components/process/processStepOne/MessageCon.tsx
index 7adde54..71faedc 100644
--- a/src/components/process/processStepOne/MessageCon.tsx
+++ b/src/components/process/processStepOne/MessageCon.tsx
@@ -31,7 +31,7 @@ const MessageCon: React.FC<MessageConIntProps> = ({ transactionTemplateToggle, a
         try {
             const res = await api.get(`/api/v1/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`);
 
-            if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
+            if (transactionTemplateToggle == TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
                 setTemplateName(res.data.name)
             }
 
diff --git a/src/components/process/processStepOne/ProcessStepOne.tsx b/src/components/process/processStepOne/ProcessStepOne.tsx
index 05ee84c..76d7db9 100644
--- a/src/components/process/processStepOne/ProcessStepOne.tsx
+++ b/src/components/process/processStepOne/ProcessStepOne.tsx
@@ -107,9 +107,15 @@ const ProcessStepOne = () => {
     (async () => {
       try {
         const res = await api.get(`/api/v1/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`);
+
+        if (res.data.status === "COMPLETED" || res.data.status === "SENT") {
+          navigate("/")
+          return;
+        }
+
         setTransactionDetails(res.data)
 
-        if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
+        if (transactionTemplateToggle == TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
           setTemplateName(res.data.name)
         }
 
@@ -121,8 +127,8 @@ const ProcessStepOne = () => {
       }
     })()
 
-    selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }));
-    selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
+    selectedRecipients.length == 0 && dispatch(fetchRecipients({ accountId, transactionId }));
+    selectedDocuments.length == 0 && dispatch(fetchDocuments({ accountId, transactionId }));
   }, [])
 
   const [emailDtls, setEmailDtls] = useState<EmailDtls>({ subject: "Documents for Signature", message: "" });
@@ -156,7 +162,7 @@ const ProcessStepOne = () => {
       }
     }
 
-    if (transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
+    if (transactionTemplateToggle != TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
       if (!selectedDocuments.length) {
         formError.documents = true
       }
@@ -195,7 +201,7 @@ const ProcessStepOne = () => {
         formError.subject = true
       }
 
-      if (SignTypeEnum.selfSign === signType) formError.recipients = false;
+      if (SignTypeEnum.selfSign == signType) formError.recipients = false;
 
       if (formError.documents || formError.recipients || formError.subject || formError.invalidRecipientLastName || formError.invalidRecipientEmail || formError.duplicateEmailSameRoutingOrder) {
         setSubmitError({ ...formError, allValid: false })
@@ -208,7 +214,7 @@ const ProcessStepOne = () => {
 
 
   const handleNextClick = async (saveAndClose: boolean = false) => {
-    if (!validationCheck() && transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
+    if (!validationCheck() && transactionTemplateToggle != TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
       setSubmitError((prev) => ({ ...prev, showError: true }))
       return
     }
@@ -225,7 +231,7 @@ const ProcessStepOne = () => {
       await api.patch(`/api/v1/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/documents`, { "documents": documentsData });
 
       await api.get(`/api/v1/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/documents?include_pages=true`).then(res => {
-        if (res.status === 200) {
+        if (res.status == 200) {
           dispatch(setDocuments(res.data));
         }
       }).catch((err) => {
@@ -246,7 +252,7 @@ const ProcessStepOne = () => {
       const recipientsData = selectedRecipients.map((recipient, index) => ({
         id: "id" in recipient ? recipient.id : null,
         routingOrder: "routingOrder" in recipient && recipient.routingOrder ? recipient.routingOrder : 1,
-        // provideOwnTags: userData.email === recipient.email && (recipient.routingOrder ?? 1) === minRoutingOrder ? true : false,
+        // provideOwnTags: userData.email == recipient.email && (recipient.routingOrder ?? 1) == minRoutingOrder ? true : false,
         provideOwnTags: false,
         type: recipient.type,
         firstName: recipient.firstName,
@@ -272,7 +278,7 @@ const ProcessStepOne = () => {
       let recipientsDataTemp = recipientsData;
       let recipientId = null;
 
-      if (signType === SignTypeEnum.selfSign) {
+      if (signType == SignTypeEnum.selfSign) {
         dispatch(removeAllRecipients());
         await Promise.all(
           selectedRecipients.map((recipient) => dispatch(removeRecipientAsync({
@@ -321,15 +327,15 @@ const ProcessStepOne = () => {
         dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
       }
 
-      if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
+      if (transactionTemplateToggle == TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
         dispatch(hideLoader());
         if (!saveAndClose) {
-          navigate(`/process-step-two/${accountId}/template/${transactionId}`)
+          navigate(`/review-and-tag/${accountId}/template/${transactionId}`)
         } else {
           navigate(`/templates`)
         }
       } else {
-        if (signType === SignTypeEnum.selfSign) {
+        if (signType == SignTypeEnum.selfSign) {
           dispatch(showLoader("Processing eSignature..."));
           (async () => {
             try {
@@ -342,7 +348,7 @@ const ProcessStepOne = () => {
             }
           })()
         } else {
-          navigate(`/process-step-two/${accountId}/${transactionId}`);
+          navigate(`/review-and-tag/${accountId}/${transactionId}`);
         }
       }
 
@@ -371,7 +377,7 @@ const ProcessStepOne = () => {
     } else {
       navigate('/')
     }
-    
+
   }
 
   useEffect(() => {
@@ -419,7 +425,7 @@ const ProcessStepOne = () => {
               <div className="hidden md:block absolute left-[55px] w-[1px] h-[62px] bg-gray-300"></div>
 
               <p className="text-base font-normal text-gray-700 relative w-full sm:w-auto">
-                {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES ? (
+                {transactionTemplateToggle == TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES ? (
                   <>
                     <input
                       value={templateName}
@@ -448,7 +454,7 @@ const ProcessStepOne = () => {
                 Advanced Options
               </button> */}
 
-              {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
+              {transactionTemplateToggle == TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
                 <button
                   onClick={() => handleNextClick(true)}
                   className="text-sm w-full sm:w-auto px-4 py-2 rounded bg-[var(--primary)] text-white shadow transition duration-300 cursor-pointer"
@@ -459,9 +465,9 @@ const ProcessStepOne = () => {
 
               <button
                 onClick={() => handleNextClick(false)}
-                className={`text-sm w-full sm:w-auto px-4 py-2 rounded bg-[var(--primary)] text-white shadow transition duration-300 cursor-pointer ${transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES || submitError.allValid || (signType === SignTypeEnum.selfSign && selectedDocuments.length) ? "opacity-100" : "opacity-60"}`}
+                className={`text-sm w-full sm:w-auto px-4 py-2 rounded bg-[var(--primary)] text-white shadow transition duration-300 cursor-pointer ${transactionTemplateToggle == TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES || submitError.allValid || (signType == SignTypeEnum.selfSign && selectedDocuments.length) ? "opacity-100" : "opacity-60"}`}
               >
-                {signType === SignTypeEnum.selfSign ? "Sign" : "Next"}
+                {signType == SignTypeEnum.selfSign ? "Sign" : "Next"}
               </button>
             </div>
           </div>
@@ -485,12 +491,12 @@ const ProcessStepOne = () => {
             <section className="mt-8">
               <p className="border-t border-gray-200"></p>
               {!isTemplate &&
-                transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES &&
+                transactionTemplateToggle != TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES &&
                 <div className="flex justify-between items-center">
                   <h2 className=" text-lg font-medium mb-4 pt-6  text-[var(--processStepOneTextHead)]">Signers</h2>
                   {/* <div className="flex items-center  mr-3">
                     <input
-                      checked={signType === SignTypeEnum.selfSign}
+                      checked={signType == SignTypeEnum.selfSign}
                       onChange={(e) => handleSelfSignCb(e)}
                       id="default-checkbox" type="checkbox" value="" className="w-4 h-4 checked:bg-[var(--mainPrimaryBtn)] bg-gray-100 border-gray-300 rounded-sm outline-none"
                     />
@@ -501,7 +507,7 @@ const ProcessStepOne = () => {
               }
 
               {
-                (signType !== SignTypeEnum.selfSign || showSelfSignWarnModal) &&
+                (signType != SignTypeEnum.selfSign || showSelfSignWarnModal) &&
                 <>
                   <RecipientsCon
                     transactionTemplateToggle={transactionTemplateToggle}
diff --git a/src/components/process/processStepOne/RecipientAddCard.tsx b/src/components/process/processStepOne/RecipientAddCard.tsx
index 13c41f3..3b1807e 100644
--- a/src/components/process/processStepOne/RecipientAddCard.tsx
+++ b/src/components/process/processStepOne/RecipientAddCard.tsx
@@ -38,7 +38,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
   const dispatch = useDispatch<AppDispatch>();
   const formRef = useRef<HTMLFormElement | null>(null);
 
-  const [recipient, setRecipients] = useState<Recipient>(recipientData !== null ? { ...recipientData } : { uuid: null, newOne: false, firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: true, allowSenderToDelete: true });
+  const [recipient, setRecipients] = useState<Recipient>(recipientData != null ? { ...recipientData } : { uuid: null, newOne: false, firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: true, allowSenderToDelete: true });
 
   const [showAdvanceSettings, setShowAdvanceSettings] = useState(false)
 
@@ -71,13 +71,13 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
     // Check if the recipient exists in the list (using uuid or id or email)
     const exists = recipients.some((r) => {
       return (
-        (r.uuid && r.uuid === editRecipient?.uuid) ||
-        (r.id && r.id === editRecipient?.id) ||
-        (r.email && r.email === editRecipient?.email)
+        (r.uuid && r.uuid == editRecipient?.uuid) ||
+        (r.id && r.id == editRecipient?.id) ||
+        (r.email && r.email == editRecipient?.email)
       );
     });
 
-    if (editCase === "Edit" && editRecipient) {
+    if (editCase == "Edit" && editRecipient) {
 
       if (!exists) {
         // Recipient was deleted -> reset
@@ -136,7 +136,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
     // 🔹 Check if we're in TRANSACTIONS mode
-    if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
+    if (transactionTemplateToggle == TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
       if (lastNameFilled || emailFilled) {
         if (lastNameFilled && !emailFilled) {
           setErrors({ ...newErrors, email: true });
@@ -208,15 +208,15 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
 
       // Clear hostName and hostEmail if type is SIGNER or CC
       if (
-        updatedRecipient.type === recipientType.SIGNER ||
-        updatedRecipient.type === recipientType.CC
+        updatedRecipient.type == recipientType.SIGNER ||
+        updatedRecipient.type == recipientType.CC
       ) {
         updatedRecipient.hostName = "";
         updatedRecipient.hostEmail = "";
       }
 
 
-      if (editCase === "Edit") {
+      if (editCase == "Edit") {
         dispatch(updateRecipient(updatedRecipient));
       } else {
         updatedRecipient.routingOrder = 1;
@@ -298,7 +298,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
 
     const inputValue = recipient[activeField].trim().toLowerCase();
     console.log(inputValue, "Line 297", activeField)
-    if (inputValue.length === 0) {
+    if (inputValue.length == 0) {
       setFilteredContacts(cachedContacts);
       setContactData({ type: activeField, contacts: cachedContacts });
       setOpenContactModal(true); // Keep showing modal with all options
@@ -322,8 +322,8 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
 
 
 
-    if (lastQuery !== inputValue) {
-      if (lastQuery !== null && inputValue.startsWith(lastQuery)) return
+    if (lastQuery != inputValue) {
+      if (lastQuery != null && inputValue.startsWith(lastQuery)) return
 
       setLastQuery(inputValue);
       api
@@ -373,7 +373,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
         id="add-recipient-step-one"
         className="w-full bg-white border border-gray-300 rounded-lg px-3 sm:px-4 lg:px-6 py-3 sm:py-4 space-y-3 sm:space-y-4 relative"
       >
-        {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
+        {transactionTemplateToggle == TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
           <div className="space-y-2 sm:space-y-3">
             {/* Role Name and Permissions Section - Responsive Layout */}
             <div className="flex flex-col lg:flex-row lg:justify-between lg:items-start gap-3 lg:gap-4">
@@ -500,10 +500,10 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
         </div>
 
         {/* Host Fields for In-Person Signers */}
-        {recipient.type === recipientType.INPERSONSIGNER && (
+        {recipient.type == recipientType.INPERSONSIGNER && (
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
             <input
-              required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
+              required={transactionTemplateToggle != TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
               type="text"
               onFocus={() => setOpenContactModal(true)}
               onBlur={handleContactModalBlur}
@@ -513,7 +513,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
               onChange={(e) => setRecipients({ ...recipient, hostName: e.target.value })}
             />
             <input
-              required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
+              required={transactionTemplateToggle != TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
               type="email"
               onFocus={() => setOpenContactModal(true)}
               onBlur={handleContactModalBlur}
@@ -556,7 +556,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
                   type="radio"
                   name="recipient-type"
                   value={option.value}
-                  checked={recipient.type === option.value}
+                  checked={recipient.type == option.value}
                   onChange={(e) => setRecipients({ ...recipient, type: e.target.value })}
                   className="accent-[var(--primary)] cursor-pointer w-3 h-3 sm:w-4 sm:h-4"
                 />
@@ -573,7 +573,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
             >
               {/* <FaPlus size={12} className="sm:w-3.5 sm:h-3.5" /> */}
               <span className="whitespace-nowrap">
-                {editCase === "Edit" ? "Edit" : "Add"}
+                {editCase == "Edit" ? "Edit" : "Add"}
               </span>
             </button>
           )}
diff --git a/src/components/process/processStepOne/RecipientCards.tsx b/src/components/process/processStepOne/RecipientCards.tsx
index e9e0320..3e537db 100644
--- a/src/components/process/processStepOne/RecipientCards.tsx
+++ b/src/components/process/processStepOne/RecipientCards.tsx
@@ -83,13 +83,13 @@ const RecipientCards = ({
     };
 
     const isEditable = (recipient: any) => {
-        return transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES
+        return transactionTemplateToggle == TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES
             ? true
             : recipient.newOne || recipient.allowSenderToEdit;
     };
 
     const validateInPersonSignerFields = (recipient: any, updatedFields: any) => {
-        if (recipient.type !== recipientType.INPERSONSIGNER) return true;
+        if (recipient.type != recipientType.INPERSONSIGNER) return true;
         const hostName = updatedFields.hostName ?? getCurrentValue(recipient, "hostName");
         const hostEmail = updatedFields.hostEmail ?? getCurrentValue(recipient, "hostEmail");
         const identifier = getRecipientIdentifier(recipient);
@@ -106,7 +106,7 @@ const RecipientCards = ({
         const identifier = getRecipientIdentifier(recipient);
         const updatedRecipient = { ...recipient, [fieldName]: value, uuid: identifier };
 
-        if (recipient.type === recipientType.INPERSONSIGNER && (fieldName === "hostName" || fieldName === "hostEmail")) {
+        if (recipient.type == recipientType.INPERSONSIGNER && (fieldName == "hostName" || fieldName == "hostEmail")) {
             if (!validateInPersonSignerFields(recipient, { [fieldName]: value })) {
                 return;
             }
@@ -132,12 +132,12 @@ const RecipientCards = ({
     const getCurrentValue = (recipient: any, fieldName: string) => {
         const identifier = getRecipientIdentifier(recipient);
         const localValue = localChanges[`${identifier}_${fieldName}`];
-        return localValue !== undefined ? localValue : recipient[fieldName];
+        return localValue != undefined ? localValue : recipient[fieldName];
     };
 
     const hasValue = (recipient: any, fieldName: string) => {
         const currentValue = getCurrentValue(recipient, fieldName);
-        return currentValue && currentValue.toString().trim() !== "";
+        return currentValue && currentValue.toString().trim() != "";
     };
 
     const renderEditableField = (
@@ -163,7 +163,7 @@ const RecipientCards = ({
                     // onChange={(e) => handleFieldChange(recipient, fieldName, e.target.value)}
                     onInput={(e) => handleFieldChange(recipient, fieldName, (e.target as HTMLInputElement).value)}
                     onKeyPress={(e) => {
-                        if (e.key === "Enter") {
+                        if (e.key == "Enter") {
                             e.currentTarget.blur();
                         }
                     }}
@@ -201,13 +201,13 @@ const RecipientCards = ({
             );
         }
 
-        if (recipients.length === 2) {
+        if (recipients.length == 2) {
             const leftRecipient = recipients.filter((obj) => {
                 if ("id" in obj && "id" in recipient) {
-                    return obj.id !== recipient.id;
+                    return obj.id != recipient.id;
                 }
                 if ("email" in obj && "email" in recipient) {
-                    return obj.email !== recipient.email;
+                    return obj.email != recipient.email;
                 }
                 return false;
             });
@@ -221,11 +221,11 @@ const RecipientCards = ({
         const identifier = getRecipientIdentifier(recipient);
         const updatedRecipient = { ...recipient, type, uuid: identifier };
 
-        if (type === recipientType.SIGNER || type === recipientType.CC) {
+        if (type == recipientType.SIGNER || type == recipientType.CC) {
             updatedRecipient.hostName = "";
             updatedRecipient.hostEmail = "";
             setErrors((prev) => ({ ...prev, [identifier]: { hostName: false, hostEmail: false } }));
-        } else if (type === recipientType.INPERSONSIGNER) {
+        } else if (type == recipientType.INPERSONSIGNER) {
             if (!validateInPersonSignerFields(recipient, updatedRecipient)) {
                 return;
             }
@@ -237,19 +237,19 @@ const RecipientCards = ({
 
     const handleDragEnd = (event: DragEndEvent) => {
         const { active, over } = event;
-        if (!over || active.id === over.id) return;
+        if (!over || active.id == over.id) return;
 
         console.log(over, "Over")
         console.log(active, "Active")
 
-        const activeIndex = recipients.findIndex((r) => (r.id || r.uuid) === active.id);
-        const overIndex = recipients.findIndex((r) => (r.id || r.uuid) === over.id);
+        const activeIndex = recipients.findIndex((r) => (r.id || r.uuid) == active.id);
+        const overIndex = recipients.findIndex((r) => (r.id || r.uuid) == over.id);
 
         const activeRec = recipients[activeIndex]
         const overRec = recipients[overIndex]
 
-        const activeRecRo = Number(activeRec.routingOrder) === 0 || !activeRec.routingOrder ? 1 : activeRec.routingOrder
-        const overRecRo = Number(overRec.routingOrder) === 0 || !overRec.routingOrder ? 1 : overRec.routingOrder
+        const activeRecRo = Number(activeRec.routingOrder) == 0 || !activeRec.routingOrder ? 1 : activeRec.routingOrder
+        const overRecRo = Number(overRec.routingOrder) == 0 || !overRec.routingOrder ? 1 : overRec.routingOrder
 
         let newActiveRecRo = 1
         let newOverRecRo = 1
@@ -318,24 +318,24 @@ const RecipientCards = ({
 
 
 
-        if (activeRecRo === activeRecRo && activeIndex < overIndex) {
+        if (activeRecRo == activeRecRo && activeIndex < overIndex) {
             newActiveRecRo = activeRecRo > 1 ? activeRecRo + 1 : 2
             newOverRecRo = overRecRo > 1 ? overRecRo : 1
         }
-        if (activeRecRo === overRecRo && activeIndex > overIndex) {
+        if (activeRecRo == overRecRo && activeIndex > overIndex) {
             newActiveRecRo = activeRecRo > 1 ? activeRecRo : 1
             newOverRecRo = overRecRo > 1 ? overRecRo + 1 : 2
         }
 
         // let reordered = recipients.map((r, idx) => {
-        //     if (idx === activeIndex) {
+        //     if (idx == activeIndex) {
         //         return (
         //             {
         //                 ...r, routingOrder: newActiveRecRo
         //             }
         //         )
         //     }
-        //     if (idx === overRecRo) {
+        //     if (idx == overRecRo) {
         //         return (
         //             {
         //                 ...r, routingOrder: newOverRecRo
@@ -389,7 +389,7 @@ const RecipientCards = ({
                                     >
                                         <div
                                             key={recipient.email + idx}
-                                            className={`relative flex flex-col lg:flex-row lg:items-center justify-between px-2 sm:px-3 lg:px-2 py-3 transition-colors gap-3 lg:gap-0 ${(recipient.uuid || recipient.id) === editRecipientCurrentEmail
+                                            className={`relative flex flex-col lg:flex-row lg:items-center justify-between px-2 sm:px-3 lg:px-2 py-3 transition-colors gap-3 lg:gap-0 ${(recipient.uuid || recipient.id) == editRecipientCurrentEmail
                                                 ? "bg-neutral-100 opacity-40"
                                                 : ""
                                                 }`}
@@ -401,7 +401,7 @@ const RecipientCards = ({
                                                     <div className="relative flex-shrink-0">
                                                         <input
                                                             type="text"
-                                                            value={recipient.routingOrder === 0 ? "" : recipient.routingOrder}
+                                                            value={recipient.routingOrder == 0 ? "" : recipient.routingOrder}
                                                             onChange={(e) => {
                                                                 const value = e.target.value;
                                                                 if (/^\d*$/.test(value)) {
@@ -410,13 +410,13 @@ const RecipientCards = ({
                                                                 }
                                                             }}
                                                             onKeyDown={(e) => {
-                                                                if (!/[0-9]/.test(e.key) && e.key !== "Backspace" && e.key !== "Tab") {
+                                                                if (!/[0-9]/.test(e.key) && e.key != "Backspace" && e.key != "Tab") {
                                                                     e.preventDefault();
                                                                 }
                                                             }}
                                                             className="w-8 sm:w-10 h-6 text-center rounded text-sm text-gray-600 focus:outline-none focus:ring-[var(--primary)] border border-dashed border-gray-400"
                                                         />
-                                                        {idx === 0 && recipients.length > 1 && <p className="group">
+                                                        {idx == 0 && recipients.length > 1 && <p className="group">
                                                             <BiSolidHelpCircle className="absolute top-[-12px] right-[-10px] text-gray-400 cursor-pointer" />
 
                                                             {/* Tooltip */}
@@ -452,7 +452,7 @@ const RecipientCards = ({
                                                     {/* Role Name and Permissions Row */}
                                                     <div className="flex flex-col lg:flex-row lg:items-center gap-2 mb-2">
                                                         {<div className="flex lg:w-1/2">
-                                                            {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES ?
+                                                            {transactionTemplateToggle == TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES ?
                                                                 <div className="font-semibold text-gray-800 text-xs">
                                                                     {renderEditableField(recipient, "roleName", "Role name")}
                                                                 </div>
@@ -465,7 +465,7 @@ const RecipientCards = ({
 
                                                         {/* Permissions - Mobile: Below role, Desktop: Right side */}
                                                         <div className="lg:w-1/2 lg:flex lg:items-center lg:justify-end">
-                                                            {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
+                                                            {transactionTemplateToggle == TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
                                                                 <div className="flex ps-2.5 sm:flex-row items-start sm:items-center gap-2 sm:gap-4">
                                                                     <label className="flex items-center gap-1 text-xs sm:text-sm text-gray-700">
                                                                         <input
@@ -532,7 +532,7 @@ const RecipientCards = ({
                                                     </div>
 
                                                     {/* Host Fields (for In-Person Signers) */}
-                                                    {recipient.type === recipientType.INPERSONSIGNER && (
+                                                    {recipient.type == recipientType.INPERSONSIGNER && (
                                                         <div className="mb-2">
                                                             <div className="flex flex-col sm:flex-row gap-1 sm:gap-2">
                                                                 <div className="w-full sm:w-1/2">
@@ -556,7 +556,7 @@ const RecipientCards = ({
                                                                 type="radio"
                                                                 name={`recipient-type-${getRecipientIdentifier(recipient)}`}
                                                                 value={recipientType.SIGNER}
-                                                                checked={recipient.type === recipientType.SIGNER}
+                                                                checked={recipient.type == recipientType.SIGNER}
                                                                 onChange={() => handleTypeChange(recipient, recipientType.SIGNER)}
                                                                 onBlur={() => setEditingField(null)}
                                                                 className="accent-[var(--primary)] w-3 h-3"
@@ -569,7 +569,7 @@ const RecipientCards = ({
                                                                 type="radio"
                                                                 name={`recipient-type-${getRecipientIdentifier(recipient)}`}
                                                                 value={recipientType.INPERSONSIGNER}
-                                                                checked={recipient.type === recipientType.INPERSONSIGNER}
+                                                                checked={recipient.type == recipientType.INPERSONSIGNER}
                                                                 onChange={() => handleTypeChange(recipient, recipientType.INPERSONSIGNER)}
                                                                 onBlur={() => setEditingField(null)}
                                                                 className="accent-[var(--primary)] w-3 h-3"
@@ -582,7 +582,7 @@ const RecipientCards = ({
                                                                 type="radio"
                                                                 name={`recipient-type-${getRecipientIdentifier(recipient)}`}
                                                                 value={recipientType.CC}
-                                                                checked={recipient.type === recipientType.CC}
+                                                                checked={recipient.type == recipientType.CC}
                                                                 onChange={() => handleTypeChange(recipient, recipientType.CC)}
                                                                 onBlur={() => setEditingField(null)}
                                                                 className="accent-[var(--primary)] w-3 h-3"
@@ -595,7 +595,7 @@ const RecipientCards = ({
                                             </div>
 
                                             {/* Action Buttons */}
-                                            {signType !== "self-sign" && (
+                                            {signType != "self-sign" && (
                                                 <div className="lg:ml-2 absolute top-[-8px] right-[-5px] px-1.5 py-1.5">
                                                     <button
                                                         type="button"
@@ -603,7 +603,7 @@ const RecipientCards = ({
                                                         aria-label={`Remove recipient ${recipient.firstName}`}
                                                         onClick={() => handleRemoveRecipient(recipient)}
                                                         disabled={
-                                                            transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES
+                                                            transactionTemplateToggle == TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES
                                                                 ? false
                                                                 : !recipient.newOne && !recipient.allowSenderToDelete
                                                         }
diff --git a/src/components/process/processStepOne/RecipientsCon.tsx b/src/components/process/processStepOne/RecipientsCon.tsx
index 2458948..6bb3226 100644
--- a/src/components/process/processStepOne/RecipientsCon.tsx
+++ b/src/components/process/processStepOne/RecipientsCon.tsx
@@ -44,7 +44,7 @@ const RecipientsCon: React.FC<RecipientsConIntProps> = ({ transactionTemplateTog
         const recipientsData = selectedRecipients.map((recipient, index) => ({
             id: "id" in recipient ? recipient.id : null,
             routingOrder: "routingOrder" in recipient && recipient.routingOrder ? recipient.routingOrder : 1,
-            provideOwnTags: userData.email === recipient.email && (recipient.routingOrder ?? 1) === minRoutingOrder ? true : false,
+            provideOwnTags: userData.email == recipient.email && (recipient.routingOrder ?? 1) == minRoutingOrder ? true : false,
             type: recipient.type,
             firstName: recipient.firstName,
             lastName: recipient.lastName,
@@ -69,7 +69,7 @@ const RecipientsCon: React.FC<RecipientsConIntProps> = ({ transactionTemplateTog
         let recipientsDataTemp = recipientsData;
         let recipientId = null;
 
-        if (signType === SignTypeEnum.selfSign) {
+        if (signType == SignTypeEnum.selfSign) {
             dispatch(removeAllRecipients());
             await Promise.all(
                 selectedRecipients.map((recipient) => dispatch(removeRecipientAsync({
@@ -123,7 +123,7 @@ const RecipientsCon: React.FC<RecipientsConIntProps> = ({ transactionTemplateTog
 
     return (
         <>
-            {(signType !== SignTypeEnum.selfSign || showSelfSignWarnModal) && <>
+            {(signType != SignTypeEnum.selfSign || showSelfSignWarnModal) && <>
                 <div className="flex flex-col gap-4 align-start">
                     {isModal && <div className="flex justify-between items-center">
                         <p className="font-medium">Recipients</p>
diff --git a/src/components/process/processStepOne/SelectedDocuments.tsx b/src/components/process/processStepOne/SelectedDocuments.tsx
index 65aad90..4e6cc3e 100644
--- a/src/components/process/processStepOne/SelectedDocuments.tsx
+++ b/src/components/process/processStepOne/SelectedDocuments.tsx
@@ -61,7 +61,7 @@ const SelectedDocuments: React.FC<SelectedDocumentsIntProps> = ({ transactionTem
 
     useEffect(() => {
         if (isModalOpen) {
-            if (errorDocuments[DocumentErrorEnum.FILE_SIZE_EXCEEDED].length === 0 && errorDocuments[DocumentErrorEnum.UNSUPPORTED_DOC_TYPE].length === 0) setModalOpen(false);
+            if (errorDocuments[DocumentErrorEnum.FILE_SIZE_EXCEEDED].length == 0 && errorDocuments[DocumentErrorEnum.UNSUPPORTED_DOC_TYPE].length == 0) setModalOpen(false);
         }
     }, [documents])
 
@@ -84,7 +84,7 @@ const SelectedDocuments: React.FC<SelectedDocumentsIntProps> = ({ transactionTem
 
     // Get proper Tailwind class names for upload card span
     const getUploadCardSpanClass = () => {
-        if (docCount === 0) {
+        if (docCount == 0) {
             // Upload card takes all columns only when no docs
             return "col-span-1 sm:col-span-2 md:col-span-3 lg:col-span-4 xl:col-span-5";
         }
@@ -107,7 +107,7 @@ const SelectedDocuments: React.FC<SelectedDocumentsIntProps> = ({ transactionTem
 
     // Calculate how many documents should be in the first row
     // const getFirstRowDocCount = () => {
-    //     if (docCount === 0) return 0;
+    //     if (docCount == 0) return 0;
     //     if (docCount <= 4) return docCount; // All docs fit in first row
     //     return 4; // Max 4 docs in first row when upload card takes 1 column
     // };
@@ -170,7 +170,7 @@ const SelectedDocuments: React.FC<SelectedDocumentsIntProps> = ({ transactionTem
                                     name={doc.name}
                                     isCompleted={
                                         "isCompleted" in doc ||
-                                            ("status" in doc && doc.status === "UPLOADED")
+                                            ("status" in doc && doc.status == "UPLOADED")
                                             ? true
                                             : false
                                     }
@@ -204,7 +204,7 @@ const SelectedDocuments: React.FC<SelectedDocumentsIntProps> = ({ transactionTem
                                 {tabs.map((tab) => (
                                     <button
                                         key={tab.name}
-                                        className={`flex items-center gap-2 p-3 rounded-md text-sm font-medium transition whitespace-nowrap ${activeTab === tab.name
+                                        className={`flex items-center gap-2 p-3 rounded-md text-sm font-medium transition whitespace-nowrap ${activeTab == tab.name
                                             ? "bg-white shadow text-[var(--primary)]"
                                             : "hover:bg-gray-200 text-gray-600"
                                             }`}
@@ -217,7 +217,7 @@ const SelectedDocuments: React.FC<SelectedDocumentsIntProps> = ({ transactionTem
 
                             {/* Modal Content */}
                             <div className="w-full sm:w-3/4 p-4 sm:p-6 overflow-y-auto">
-                                {activeTab === "Upload" && (
+                                {activeTab == "Upload" && (
                                     <div
                                         onClick={() => fileInputRef.current?.click()}
                                         onDragOver={(e) => e.preventDefault()}
@@ -258,7 +258,7 @@ const SelectedDocuments: React.FC<SelectedDocumentsIntProps> = ({ transactionTem
                                     </div>
 
                                 )}
-                                {activeTab !== "Upload" && (
+                                {activeTab != "Upload" && (
                                     <div className="flex items-center justify-center h-full text-gray-400 text-sm">
                                         <p>{activeTab} integration coming soon...</p>
                                     </div>
diff --git a/src/components/process/processStepOne/SortableRecipient.tsx b/src/components/process/processStepOne/SortableRecipient.tsx
index f5d3c2f..ceeceef 100644
--- a/src/components/process/processStepOne/SortableRecipient.tsx
+++ b/src/components/process/processStepOne/SortableRecipient.tsx
@@ -27,7 +27,7 @@ const SortableRecipient = ({ recipient, idx, editRecipientCurrentEmail, children
     <div
       ref={setNodeRef}
       style={style}
-      className={`relative flex flex-col lg:flex-row lg:items-center justify-between px-2 sm:px-3 lg:px-2 py-3 transition-colors gap-3 lg:gap-0 ${(recipient.uuid || recipient.id) === editRecipientCurrentEmail ? "bg-neutral-100 opacity-40" : ""}
+      className={`relative flex flex-col lg:flex-row lg:items-center justify-between px-2 sm:px-3 lg:px-2 py-3 transition-colors gap-3 lg:gap-0 ${(recipient.uuid || recipient.id) == editRecipientCurrentEmail ? "bg-neutral-100 opacity-40" : ""}
         ${isDragging ? "bg-blue-50 shadow-lg" : ""}
       `}
     >
diff --git a/src/components/process/processStepTwo/DocumentContainer.tsx b/src/components/process/processStepTwo/DocumentContainer.tsx
index 2fb7745..1ce10ba 100644
--- a/src/components/process/processStepTwo/DocumentContainer.tsx
+++ b/src/components/process/processStepTwo/DocumentContainer.tsx
@@ -74,7 +74,7 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
         }
 
         // If is preview is enable
-        if (isPreview && aId !== null && tId !== null) {
+        if (isPreview && aId != null && tId != null) {
             accountId = aId;
             transactionId = tId;
         }
@@ -107,8 +107,8 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
         const [hotKeysObj, setHotKeysObj] = useState<HotKeysObj>(hotKeysObjInitial);
 
         useEffect(() => {
-            selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }));
-            selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
+            selectedRecipients.length == 0 && dispatch(fetchRecipients({ accountId, transactionId }));
+            selectedDocuments.length == 0 && dispatch(fetchDocuments({ accountId, transactionId }));
         }, [])
 
 
@@ -148,7 +148,7 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
 
         // FETCHING TAG - START
         useEffect(() => {
-            if (selectedRecipients.length === 0) return;
+            if (selectedRecipients.length == 0) return;
             fetchTags();
         }, [selectedRecipients, isPreview]);
         // FETCHING TAG - END
@@ -235,7 +235,7 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
 
         const handleTransactionProcess = async (save: boolean = false) => {
             dispatch(showLoader("Saving Tags ..."))
-            if (Object.keys(droppedItems).length === 0) return;
+            if (Object.keys(droppedItems).length == 0) return;
             // if (!save) return;
 
             let updatedTags: any = [];
@@ -253,8 +253,8 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
                 dispatch(showLoader("Sending ..."))
                 const res = await api.put(`/api/v1/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
                 if (res.status >= 200 && res.status < 300) {
-                    // navigate(`/transaction-sent/${accountId}/${transactionId}`, { replace: true })
-                    window.location.href = `${import.meta.env.VITE_BASE_URI}/transaction-sent/${accountId}/${transactionId}`
+                    navigate(`/transaction-sent/${accountId}/${transactionId}`, { replace: true })
+                    // window.location.href = `${import.meta.env.VITE_BASE_URI}/transaction-sent/${accountId}/${transactionId}`
                 }
                 dispatch(hideLoader())
             }
@@ -295,7 +295,7 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
             const field = { ...dragElemData }
             if (!field.label) return;
 
-            // const field = fields.find((item) => item.label === dragElemData.label); // Find corresponding field
+            // const field = fields.find((item) => item.label == dragElemData.label); // Find corresponding field
             // if (!field) return; // If not found, exit
 
             const dropZone = event.currentTarget.getBoundingClientRect();
@@ -334,7 +334,7 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
                     width: dragElemData.width,
                     height: dragElemData.height,
                 },
-                styles: dragElemData.label === "text" ? {
+                styles: dragElemData.label == "text" ? {
                     "font": "Great Vibes",
                     "italic": false,
                     "bold": false,
@@ -346,7 +346,7 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
                 pageIndex: pageIndex,
                 recipientId: dragElemData.recipientId,
                 recipientIndx: dragElemData.recipientIndx,
-                required: (dragElemData.label !== TagsTypes.SIGNATURE && dragElemData.label !== TagsTypes.INITIALS) ? false : true,
+                required: (dragElemData.label != TagsTypes.SIGNATURE && dragElemData.label != TagsTypes.INITIALS) ? false : true,
                 update: true,
                 isDeleted: false
             }
@@ -357,13 +357,13 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
 
             }
 
-            if (prepData.type === "temporal") {
+            if (prepData.type == "temporal") {
                 prepData.currentTimeStamp = true;
             }
 
 
 
-            if (prepData.type.toLowerCase() === "number") {
+            if (prepData.type.toLowerCase() == "number") {
                 prepData.decimalPlace = 0;
                 prepData.isCurrency = false;
             }
@@ -442,10 +442,10 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
                         const tagIndex = tag.getAttribute("data-tag-id") ?? "";
                         const key = tag.getAttribute("data-drop-key") ?? "";
 
-                        childRef.current.handleRemoveTag(key, Number(tagIndex))
+                        childRef.current.handleRemoveTag(key, tagIndex)
                     })
 
-                    if (allselectedTags.length === 0) childRef.current.handleRemoveTag(selectedTag?.key, selectedTag?.index)
+                    if (allselectedTags.length == 0) childRef.current.handleRemoveTag(selectedTag?.key, selectedTag?.index)
                     break;
 
                 default:
@@ -522,7 +522,21 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
                                                         className='drop-page-in shadow-md relative'
                                                     >
 
+                                                        <img
+                                                            // style={{ "minWidth": page.width, "minHeight": page.height, "maxWidth": page.width, "maxHeight": page.height }}
+                                                            style={{ "width": page.width, "height": page.height, "maxWidth": "100%", "maxHeight": "100%" }}
+                                                            // style={{ "width": "100%", "height": "100%", "maxWidth": "100%", "maxHeight": "100%" }}
+                                                            // className={`w-[${(page.width / 2)}px] h-[${(page.height / 2)}px] sm:w-[${page.width}px] sm:h-[${page.height}px]`}
+                                                            draggable="false"
+                                                            width={page.width}
+                                                            height={page.height}
+                                                            // src={`http://10.10.1.99:8083/api/v1/accounts/${accountId}/transactions/${transactionId}/documents/${doc.id}/pages/${page.id}`}
+                                                            src={page.src}
+                                                            loading='lazy'
+                                                        />
+
                                                         <DroppedItemsTagsCon
+                                                            pageWidth={page.width}
                                                             ref={childRef}
                                                             droppedItems={droppedItems}
                                                             pageIdkey={key}
@@ -536,17 +550,6 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
                                                             tagUndoRef={tagUndoRef}
                                                         />
 
-                                                        <img
-                                                            style={{ "minWidth": page.width, "minHeight": page.height, "maxWidth": page.width, "maxHeight": page.height }}
-                                                            draggable="false"
-                                                            width={page.width}
-                                                            height={page.height}
-                                                            // src={`http://10.10.1.99:8083/api/v1/accounts/${accountId}/transactions/${transactionId}/documents/${doc.id}/pages/${page.id}`}
-                                                            src={page.src}
-                                                            loading='lazy'
-                                                        />
-
-
                                                         {/* Side details of documents Pages and document Name - START */}
                                                         <p className='absolute top-[50%] translate-y-[-50%] rotate-[-90deg] text-xs left-[-60px] text-slate-600'>
                                                             page {indx + 1} of {doc.pages && doc.pages.length}
@@ -572,7 +575,7 @@ const DocumentContainer = forwardRef<DocumentContainerRef, DocumentContainerProp
 
                 </div >
 
-                {selectedTag && selectedTag !== null && "key" in selectedTag && "index" in selectedTag && <RightSideBar
+                {selectedTag && selectedTag != null && "key" in selectedTag && "index" in selectedTag && <RightSideBar
                     droppedItems={droppedItems}
                     selectedTag={droppedItems[selectedTag.key][selectedTag.index]}
                     setDroppedItems={setDroppedItems}
diff --git a/src/components/process/processStepTwo/DroppedItemsTagsCon.tsx b/src/components/process/processStepTwo/DroppedItemsTagsCon.tsx
index 0ec7b0d..c37826e 100644
--- a/src/components/process/processStepTwo/DroppedItemsTagsCon.tsx
+++ b/src/components/process/processStepTwo/DroppedItemsTagsCon.tsx
@@ -19,6 +19,7 @@ import { Recipient } from '../../../store/slices/selectedRecipientsSlice';
 import { DroppedItem } from '../../../utlity/types';
 
 interface DroppedItemsTagsConProps {
+    pageWidth: number;
     droppedItems: DroppedItemsObj;
     pageIdkey: string;
     selectedTag: { key: string; index: number } | null;
@@ -33,6 +34,7 @@ interface DroppedItemsTagsConProps {
 
 // 👶 Child component with forwardRef
 const DroppedItemsTagsCon = forwardRef(({
+    pageWidth,
     droppedItems,
     pageIdkey,
     selectedTag,
@@ -52,7 +54,7 @@ const DroppedItemsTagsCon = forwardRef(({
     }
 
     const handleRemoveTag = (key: string, targetIndex: number) => {
-        if (key === undefined || targetIndex === undefined) return
+        if (key == undefined || targetIndex == undefined) return
 
         const tag = droppedItems[key][targetIndex];
         const recipientId = tag.recipientId;
@@ -61,7 +63,7 @@ const DroppedItemsTagsCon = forwardRef(({
             if ("id" in tag) {
                 try {
                     const response = await api.delete(`/api/v1/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipientId}/tags/${tag.id}`)
-                    if (response.status !== 200) throw "Tag Deletion error"
+                    if (response.status != 200) throw "Tag Deletion error"
                 } catch (err) {
                     console.error("Tag Deletion error")
                     return;
@@ -79,13 +81,13 @@ const DroppedItemsTagsCon = forwardRef(({
                 // Find all items in the same group
                 const groupItems = droppedItems[key]
                     .map((item, idx) => ({ item, index: idx }))
-                    .filter(({ item }) => 'group' in item && item.group === groupId && !item.isDeleted);
+                    .filter(({ item }) => 'group' in item && item.group == groupId && !item.isDeleted);
 
                 // Sort group items by their top position to identify the parent (top-most)
                 groupItems.sort((a, b) => a.item.dimensions.top - b.item.dimensions.top);
 
                 // Check if the item being removed is the parent (top-most item)
-                const isParentItem = groupItems.length > 0 && groupItems[0].index === targetIndex;
+                const isParentItem = groupItems.length > 0 && groupItems[0].index == targetIndex;
 
                 if (isParentItem && groupItems.length > 1) {
                     // If removing the parent and there are child items, mark all items in the group as deleted
@@ -113,17 +115,17 @@ const DroppedItemsTagsCon = forwardRef(({
                     setDroppedItems(prevState => ({
                         ...prevState,
                         [key]: prevState[key].map((item, index) =>
-                            index === targetIndex ? { ...item, isDeleted: true } : item
+                            index == targetIndex ? { ...item, isDeleted: true } : item
                         )
                     }));
 
                     // Check if this was the last item in the group after state update
                     setTimeout(() => {
                         const remainingGroupItems = droppedItems[key].filter(item =>
-                            'group' in item && item.group === groupId && !item.isDeleted
+                            'group' in item && item.group == groupId && !item.isDeleted
                         );
 
-                        if (remainingGroupItems.length === 0) {
+                        if (remainingGroupItems.length == 0) {
                             // Remove group borders if no items left
                             removeGroupBorders(groupId);
                         } else {
@@ -137,7 +139,7 @@ const DroppedItemsTagsCon = forwardRef(({
                 setDroppedItems(prevState => ({
                     ...prevState,
                     [key]: prevState[key].map((item, index) =>
-                        index === targetIndex ? { ...item, isDeleted: true } : item
+                        index == targetIndex ? { ...item, isDeleted: true } : item
                     )
                 }));
             }
@@ -206,7 +208,7 @@ const DroppedItemsTagsCon = forwardRef(({
             //     ...prevState,
             //     [key]: Array.isArray(prevState[key])
             //         ? prevState[key].map((item, i) =>
-            //             i === index ? { ...item, dimensions: { ...item.dimensions, left, top }, update: true } : item
+            //             i == index ? { ...item, dimensions: { ...item.dimensions, left, top }, update: true } : item
             //         )
             //         : [],
             // }));
@@ -248,7 +250,7 @@ const DroppedItemsTagsCon = forwardRef(({
                 ...prevState,
                 [key]: Array.isArray(prevState[key])
                     ? prevState[key].map((item, i) =>
-                        i === index ? { ...item, dimensions: { ...item.dimensions, left, top }, update: true } : item
+                        i == index ? { ...item, dimensions: { ...item.dimensions, left, top }, update: true } : item
                     )
                     : [],
             }));
@@ -286,19 +288,19 @@ const DroppedItemsTagsCon = forwardRef(({
 
 
             const dropZone: DOMRect = targetContainer?.getBoundingClientRect() as DOMRect;
-            const droppedElemRect: DOMRect = targetElement?.getBoundingClientRect() as DOMRect; 
+            const droppedElemRect: DOMRect = targetElement?.getBoundingClientRect() as DOMRect;
+
+
+
 
 
-            
-            
-            
             console.log(dropZone, "dropZone Line 309")
             console.log(droppedElemRect, "rect Line 309")
-            
+
             let newWidth = startWidth + (event.clientX - startX);
             let newHeight = startHeight + (event.clientY - startY);
-            
-            
+
+
             if (newHeight > 200 || newWidth > 400) {
                 if (newHeight > 200) {
                     newHeight = 200
@@ -308,7 +310,7 @@ const DroppedItemsTagsCon = forwardRef(({
                     newWidth = 400
                 }
             }
-            
+
             if ((dropZone.right - (droppedElemRect.left + newWidth)) < 0) {
                 newWidth = startWidth
             }
@@ -321,7 +323,7 @@ const DroppedItemsTagsCon = forwardRef(({
                 ...droppedItems,
                 [key]: Array.isArray(droppedItems[key]) // Ensure it's an array
                     ? droppedItems[key].map((item, i) =>
-                        i === index ? { ...item, dimensions: { ...item.dimensions, width: newWidth, height: newHeight }, update: true } : item
+                        i == index ? { ...item, dimensions: { ...item.dimensions, width: newWidth, height: newHeight }, update: true } : item
                     )
                     : [], // Provide a fallback in case it's undefined or not an array
             });
@@ -354,7 +356,7 @@ const DroppedItemsTagsCon = forwardRef(({
     const handleIGroupBorderPosition = (groupId: string) => {
         const groupElements: NodeListOf<HTMLElement> = document.querySelectorAll(`div[group="${groupId}"]`);
 
-        if (groupElements.length === 0) {
+        if (groupElements.length == 0) {
             console.log("No group elements found for:", groupId);
             return;
         }
@@ -381,7 +383,7 @@ const DroppedItemsTagsCon = forwardRef(({
     };
 
     const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, containerRect: DOMRect, offsetX: number, offsetY: number) => {
-        if (!groupElements || groupElements.length === 0) return;
+        if (!groupElements || groupElements.length == 0) return;
 
         const groupId = groupElements[0].getAttribute('group');
         if (!groupId) return;
@@ -424,17 +426,17 @@ const DroppedItemsTagsCon = forwardRef(({
             if (!borderElement) {
                 // Create border element if it doesn't exist
                 borderElement = document.createElement('div');
-                borderElement.className = `group-border ${position === 'bottom' ? 'bottom-border' : ''}`;
+                borderElement.className = `group-border ${position == 'bottom' ? 'bottom-border' : ''}`;
                 borderElement.setAttribute('border-group', groupId);
                 borderElement.setAttribute('border-pos', position);
 
                 // Add the + icon for bottom border
-                if (position === 'bottom') {
+                if (position == 'bottom') {
                     const addIcon = document.createElement('div');
                     addIcon.innerHTML = '<IoAdd />'; // You might need to adjust this based on your icon system
                     addIcon.onclick = () => {
                         // Find the original item to pass to handleAddGroupItemClicked
-                        const originalItem = droppedItems[key]?.find(item => 'group' in item && item.group === groupId);
+                        const originalItem = droppedItems[key]?.find(item => 'group' in item && item.group == groupId);
                         if (originalItem) {
                             handleAddGroupItemClicked(key, originalItem);
                         }
@@ -448,7 +450,7 @@ const DroppedItemsTagsCon = forwardRef(({
 
             // Position the border element
             borderElement.style.position = 'absolute';
-            borderElement.style.pointerEvents = position === 'bottom' ? 'auto' : 'none';
+            borderElement.style.pointerEvents = position == 'bottom' ? 'auto' : 'none';
 
             switch (position) {
                 case 'top':
@@ -484,11 +486,11 @@ const DroppedItemsTagsCon = forwardRef(({
 
         // Find all existing items in this group to determine the bottom-most position
         const existingGroupItems = droppedItems[key]?.filter(existingItem =>
-            'group' in existingItem && existingItem.group === groupId
+            'group' in existingItem && existingItem.group == groupId
         ) || [];
 
         const existingGroupItem = droppedItems[key]?.filter(existingItem =>
-            'group' in existingItem && existingItem.group === groupId
+            'group' in existingItem && existingItem.group == groupId
         ) || [];
 
         existingGroupItem[0].options
@@ -560,7 +562,7 @@ const DroppedItemsTagsCon = forwardRef(({
 
                 const type = item.type.toUpperCase();
                 const IconComponent = typeToIconMap[type] || <FaQuestionCircle />;
-                const selectedRecipient = selectedRecipients.filter((obj, indx) => obj.id === item.recipientId);
+                const selectedRecipient = selectedRecipients.filter((obj, indx) => obj.id == item.recipientId);
                 return (
                     <React.Fragment key={index}>
                         <div
@@ -568,20 +570,27 @@ const DroppedItemsTagsCon = forwardRef(({
                             draggable="false"
                             data-tag-id={index}
                             data-drop-key={pageIdkey}
-                            data-tag-selected={index === selectedTag?.index}
+                            data-tag-selected={index == selectedTag?.index}
                             className="absolute rounded dropped-item"
                             onClick={() => handleTagClick(pageIdkey, index)}
+                            // style={{
+                            //     left: `${item.dimensions.left}px`,
+                            //     top: `${item.dimensions.top}px`,
+                            //     width: item.type == "radio" ? `${item.dimensions.width + 20}px` : `${item.dimensions.width}px`,
+                            //     height: item.type == "radio" ? `max-content` : `${item.dimensions.height}px`
+                            // }}
+
                             style={{
-                                left: `${item.dimensions.left}px`,
-                                top: `${item.dimensions.top}px`,
-                                width: item.type === "radio" ? `${item.dimensions.width + 20}px` : `${item.dimensions.width}px`,
-                                height: item.type === "radio" ? `max-content` : `${item.dimensions.height}px`
+                                left: `${((item.dimensions.left / pageWidth) * 100)}%`,
+                                top: item.dimensions.top,
+                                width: `${((item.dimensions.width / pageWidth) * 100)}%`,
+                                height: item.dimensions.height,
                             }}
                         >
 
 
                             {/* If Selected Tag Recipient Info- START */}
-                            {selectedTag?.key && selectedTag.key === pageIdkey && selectedTag.index === index &&
+                            {selectedTag?.key && selectedTag.key == pageIdkey && selectedTag.index == index &&
                                 <div className='absolute flex justify-between items-center w-full max-w-max bg-white top-[-22px] shadow z-20 text-sm rounded-t-sm' >
                                     <div className='flex justify-center items-center gap-1 bg-white px-2 shadow'>
                                         <p className='w-2.5 h-2.5 rounded'
@@ -601,7 +610,7 @@ const DroppedItemsTagsCon = forwardRef(({
 
 
                             {/* Expand Circle - STARTS */}
-                            {item.type !== "radio" && item.type !== "checkbox" && <div
+                            {item.type != "radio" && item.type != "checkbox" && <div
                                 onPointerDown={(e) => handleExpandTag(e, pageIdkey, index)}
                                 className='w-2.5 h-2.5 absolute bg-red-400 rounded-full bottom-[-8px] right-[-8px] cursor-nw-resize hover:bg-blue-400'>
                             </div>}
diff --git a/src/components/process/processStepTwo/FieldList.tsx b/src/components/process/processStepTwo/FieldList.tsx
index 9927641..d241e5f 100644
--- a/src/components/process/processStepTwo/FieldList.tsx
+++ b/src/components/process/processStepTwo/FieldList.tsx
@@ -14,7 +14,7 @@ const handlePointerDown = (event: React.DragEvent<HTMLDivElement>, label: string
     let width = dragElemRect.width
     let height = dragElemRect.height
 
-    if (label === TagsTypes.RADIO || label === TagsTypes.CHECKBOX) {
+    if (label == TagsTypes.RADIO || label == TagsTypes.CHECKBOX) {
         const innerIconConRect = event.currentTarget.children[0].getBoundingClientRect();
         width = innerIconConRect.width + 10
         height = innerIconConRect.height + 10
@@ -92,7 +92,7 @@ const handlePointerDown = (event: React.DragEvent<HTMLDivElement>, label: string
         properties: tagsProperties
     }
 
-    if (obj.label.toLowerCase() === "radio" || obj.label.toLowerCase() === "checkbox") obj.group = uuidv4();
+    if (obj.label.toLowerCase() == "radio" || obj.label.toLowerCase() == "checkbox") obj.group = uuidv4();
 
     window.dragElemData = JSON.stringify(obj);
 }
@@ -130,7 +130,7 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
                 const priorityOrder = ['SIGNATURE', 'INITIALS', 'STAMP'];
 
                 const data = res.data.filter((obj, indx) => {
-                    if (obj.type === "STAMP" || obj.type === "RADIO" || obj.type === "CHECKBOX" || obj.type === "ATTACHMENT") return false
+                    if (obj.type == "STAMP" || obj.type == "RADIO" || obj.type == "CHECKBOX" || obj.type == "ATTACHMENT") return false
                     return true
                 });
 
@@ -145,7 +145,7 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
 
                 // Maintain the custom order of priority
                 const prioritizedSorted = priorityOrder
-                    .map((type) => prioritized.find((tag: any) => tag.type === type))
+                    .map((type) => prioritized.find((tag: any) => tag.type == type))
                     .filter(Boolean); // remove undefined in case not found
 
 
@@ -249,7 +249,7 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
                 const priorityOrder = ['SIGNATURE', 'INITIALS', 'STAMP'];
 
                 data = data.filter((obj, indx) => {
-                    if (obj.type === "STAMP" || obj.type === "RADIO" || obj.type === "CHECKBOX" || obj.type === "ATTACHMENT") return false
+                    if (obj.type == "STAMP" || obj.type == "RADIO" || obj.type == "CHECKBOX" || obj.type == "ATTACHMENT") return false
                     return true
                 });
 
@@ -264,7 +264,7 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
 
                 // Maintain the custom order of priority
                 const prioritizedSorted = priorityOrder
-                    .map((type) => prioritized.find((tag: any) => tag.type === type))
+                    .map((type) => prioritized.find((tag: any) => tag.type == type))
                     .filter(Boolean); // remove undefined in case not found
 
 
diff --git a/src/components/process/processStepTwo/LeftSideBar.tsx b/src/components/process/processStepTwo/LeftSideBar.tsx
index 011f88f..ac752ac 100644
--- a/src/components/process/processStepTwo/LeftSideBar.tsx
+++ b/src/components/process/processStepTwo/LeftSideBar.tsx
@@ -11,7 +11,8 @@ import { useParams } from 'react-router-dom';
 import { fetchDocuments } from '../../../store/slices/documentSlice';
 import { GrFormPrevious } from 'react-icons/gr';
 import { LuTableOfContents } from 'react-icons/lu';
-import { IoIosDocument } from 'react-icons/io';
+import { IoIosDocument, IoMdClose } from 'react-icons/io';
+import { FaAngleUp, FaChevronRight } from 'react-icons/fa';
 
 interface LeftSideBarProps {
     isFields: boolean;
@@ -19,7 +20,7 @@ interface LeftSideBarProps {
     selectedRecipientIndx: number;
     setSelectedRecipient: React.Dispatch<React.SetStateAction<number>>
     handleSetIsFields: (setTo: boolean) => void;
-    handleSetIsPages:(setTo: boolean) => void;
+    handleSetIsPages: (setTo: boolean) => void;
 }
 
 const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRecipientIndx, setSelectedRecipient, handleSetIsFields, handleSetIsPages }) => {
@@ -46,13 +47,13 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
     const [currentPage, setCurrentPage] = useState(0);
 
     useEffect(() => {
-        if (selectedRecipients.length === 0) {
+        if (selectedRecipients.length == 0) {
             dispatch(fetchRecipients({ accountId, transactionId }));
         }
     }, [dispatch, accountId, transactionId, selectedRecipients.length]);
 
     useEffect(() => {
-        if (selectedDocuments.length === 0) {
+        if (selectedDocuments.length == 0) {
             dispatch(fetchDocuments({ accountId, transactionId }));
         }
     }, [dispatch, accountId, transactionId, selectedDocuments.length]);
@@ -72,9 +73,9 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
 
 
     useEffect(() => {
-        if (selectedRecipient && selectedRecipient.type === recipientType.CC) {
+        if (selectedRecipient && selectedRecipient.type == recipientType.CC) {
             for (const [indx, recip] of selectedRecipients.entries()) {
-                if (recip.type !== recipientType.CC) {
+                if (recip.type != recipientType.CC) {
                     setSelectedRecipient(indx);
                     break;
                 }
@@ -82,7 +83,7 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
         };
     }, [selectedRecipient])
 
-    if (selectedRecipient && selectedRecipient.type === recipientType.CC) {
+    if (selectedRecipient && selectedRecipient.type == recipientType.CC) {
         return <div className='col-span-2 bg-white h-full p-4 overflow-y-auto'></div>;
     }
 
@@ -90,9 +91,17 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
         <>
             {/* Left Side Bar - START */}
             {
-                <div className={`${!isFields && !isPages ? "hidden" : ""} p-4 absolute top-[48px] sm:top-[0] rounded-tr-md z-50 sm:relative sm:col-span-2 bg-white border-t-1 border-r-1 border-slate-300 h-[calc(100vh-40px)] overflow-y-auto`}>
+                (isPages || isFields) && <div className={`sm:block p-4 absolute top-[48px] sm:top-[0] rounded-tr-md z-50 sm:relative sm:col-span-2 bg-white border-t-1 border-r-1 border-slate-300 h-[calc(100vh-40px)] overflow-y-auto`}>
+                    <div
+                        onClick={() => {
+                            handleSetIsPages(false)
+                            handleSetIsFields(false)
+                        }}
+                        className='absolute top-[5px] right-[5px] bg-white rounded-full'>
+                        <IoMdClose />
+                    </div>
 
-                    <div className='flex flex-col md:flex-row justify-between items-center bg-slate-100 p-1.5 rounded-2xl border-1 border-gray-200 mb-3'>
+                    <div className='hidden sm:flex flex-col md:flex-row justify-between items-center bg-slate-100 p-1.5 rounded-2xl border-1 border-gray-200 mb-3'>
                         <div
                             onClick={() => handleSetIsFields(!isFields)}
                             className={`flex items-center gap-1 cursor-pointer text-xs w-full justify-center py-1.5 rounded-2xl ${isFields ? 'bg-[var(--primary)] text-white' : ''} transition-all duration-300`}>
@@ -125,8 +134,8 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
                                     {/* <FaUserTie className='w-3 h-3 text-2xl mt-[1px]' style={{ color: selectedRecipient.color }} /> */}
                                     <p>
                                         {
-                                            selectedRecipient.firstName.length === 0 && selectedRecipient.lastName.length === 0 ?
-                                                (selectedRecipient.email.length === 0 ? selectedRecipient.roleName : selectedRecipient.email) :
+                                            selectedRecipient.firstName.length == 0 && selectedRecipient.lastName.length == 0 ?
+                                                (selectedRecipient.email.length == 0 ? selectedRecipient.roleName : selectedRecipient.email) :
                                                 `${selectedRecipient.firstName + " " + selectedRecipient.lastName}`
                                         }
                                     </p>
@@ -137,7 +146,7 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
                             <div
                                 className={`absolute w-full shadow-md rounded-md mt-1 px-2 py-1 z-20 bg-white ${dropDownToggle ? '' : 'hidden'}`}>
                                 {selectedRecipients.length && selectedRecipients.map((recipient, indx) => {
-                                    if (recipient.type === recipientType.CC) return null; // Skip CC recipients
+                                    if (recipient.type == recipientType.CC) return null; // Skip CC recipients
                                     return (<div
                                         key={indx}
                                         className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-pointer hover:bg-slate-100'
@@ -153,13 +162,13 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
                                             {/* <FaUser className='w-3 h-3 text-2xl mt-[1px]' style={{ color: recipient.color }} /> */}
                                             <p>
                                                 {
-                                                    recipient.firstName.length === 0 && recipient.lastName.length === 0 ?
-                                                        (recipient.email.length === 0 ? recipient.roleName : recipient.email) :
+                                                    recipient.firstName.length == 0 && recipient.lastName.length == 0 ?
+                                                        (recipient.email.length == 0 ? recipient.roleName : recipient.email) :
                                                         `${recipient.firstName + " " + recipient.lastName}`
                                                 }
                                             </p>
                                         </div>
-                                        {selectedRecipientIndx === indx && <IoCheckmark className='text-[var(--primary)]' />}
+                                        {selectedRecipientIndx == indx && <IoCheckmark className='text-[var(--primary)]' />}
                                     </div>)
                                 })}
                             </div>
@@ -187,8 +196,8 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
                                     // onBlur={() => setDropDownTogglePage('')}
                                     >
                                         <div
-                                            onClick={() => setDropDownTogglePage(`${(dropDownTogglePage === 'pageDropDown' + indx) ? '' : 'pageDropDown' + indx}`)}
-                                            className={`p-2 ${(dropDownTogglePage === 'pageDropDown' + indx) ? "bg-[var(--primary)]" : "bg-slate-200"} flex flex-col justify-center items-center gap-2 rounded`}>
+                                            onClick={() => setDropDownTogglePage(`${(dropDownTogglePage == 'pageDropDown' + indx) ? '' : 'pageDropDown' + indx}`)}
+                                            className={`p-2 ${(dropDownTogglePage == 'pageDropDown' + indx) ? "bg-[var(--primary)]" : "bg-slate-200"} flex flex-col justify-center items-center gap-2 rounded`}>
                                             {
                                                 document.pages != undefined && <img
                                                     key={indx}
@@ -200,21 +209,21 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
                                             <div
                                                 className='flex items-center justify-between w-full text-xs rounded-sm cursor-pointer text-slate-100'>
                                                 <p className='whitespace-nowrap overflow-hidden text-ellipsis max-w-[18ch]'>{document.name}</p>
-                                                <MdKeyboardArrowDown className={`${(dropDownTogglePage === 'pageDropDown' + indx) ? 'rotate-180' : ''}`} />
+                                                <MdKeyboardArrowDown className={`${(dropDownTogglePage == 'pageDropDown' + indx) ? 'rotate-180' : ''}`} />
                                             </div>
                                         </div>
 
 
                                         {
-                                            dropDownTogglePage === 'pageDropDown' + indx &&
+                                            dropDownTogglePage == 'pageDropDown' + indx &&
                                             <div className="my-1 flex justify-center items-center gap-2 flex-wrap">
                                                 {/* Prev Button */}
                                                 <a
                                                     href={"#" + document.id + (currentPage - 1)}
-                                                    className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage === 0 ? "pointer-events-none opacity-50" : ""
+                                                    className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage == 0 ? "pointer-events-none opacity-50" : ""
                                                         }`}
                                                     onClick={(e) => {
-                                                        if (currentPage === 0) e.preventDefault();
+                                                        if (currentPage == 0) e.preventDefault();
                                                         else setCurrentPage(currentPage - 1);
                                                     }}
                                                 >
@@ -245,10 +254,10 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
                                                 {/* Next Button */}
                                                 <a
                                                     href={"#" + document.id + (currentPage + 1)}
-                                                    className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage === document.pages?.length - 1 ? "pointer-events-none opacity-50" : ""
+                                                    className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage == document.pages?.length - 1 ? "pointer-events-none opacity-50" : ""
                                                         }`}
                                                     onClick={(e) => {
-                                                        if (currentPage === document.pages?.length - 1) e.preventDefault();
+                                                        if (currentPage == document.pages?.length - 1) e.preventDefault();
                                                         else setCurrentPage(currentPage + 1);
                                                     }}
                                                 >
@@ -266,8 +275,59 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRe
                     </>}
                 </div>
             }
-
             {/* Left Side Bar - END */}
+
+            {/* Small Devices - START  */}
+
+
+            <div>
+
+                {/* Left Side Pages */}
+                {!isPages && <div
+                    onClick={() => {
+                        handleSetIsPages(true)
+                        handleSetIsFields(false)
+                    }}
+                    className='sm:hidden fixed top-[8%] left-0 bg-[var(--primary)] z-50 flex items-center text-white rounded-tr-md rounded-br-md cursor-pointer opacity-30 hover:opacity-100 transition-all duration-300'>
+                    <div className='py-2'>
+                        <FaAngleUp className='rotate-90' />
+                        <p className='flex flex-col justify-center items-center text-xs tracking-widest mt-1 pt-1 border-t-1 border-white'>
+                            <span>P</span>
+                            <span>A</span>
+                            <span>G</span>
+                            <span>E</span>
+                            <span>S</span>
+                        </p>
+                    </div>
+                </div>}
+
+
+                <div
+                    className='sm:hidden fixed bottom-0 left-0 rounded-tr-md rounded-tl-md bg-[var(--primary)] z-50 w-full flex justify-center text-white cursor-pointer opacity-30 hover:opacity-100 transition-all duration-300'
+                    onClick={() => {
+                        handleSetIsPages(false)
+                        handleSetIsFields(true)
+                    }}
+                >
+                    <div className='flex'>
+                        <FaAngleUp />
+                        <p className='flex justify-center items-center text-xs tracking-widest ml-1 pl-1 border-l-1 border-white'>
+                            <span>T</span>
+                            <span>A</span>
+                            <span>G</span>
+                            <span>S</span>
+                        </p>
+                    </div>
+                </div>
+
+
+            </div>
+
+
+            {/* Small Devices - END  */}
+
+
+
         </>
     )
 }
diff --git a/src/components/process/processStepTwo/NavTwo.tsx b/src/components/process/processStepTwo/NavTwo.tsx
index 0bb2bd7..4ca7dcc 100644
--- a/src/components/process/processStepTwo/NavTwo.tsx
+++ b/src/components/process/processStepTwo/NavTwo.tsx
@@ -92,7 +92,7 @@ const NavTwo: React.FC<NavTwoProps> = ({
     }
 
     // If is preview is enable
-    if (isPreview && aId !== null && tId !== null) {
+    if (isPreview && aId != null && tId != null) {
         accountId = aId;
         transactionId = tId;
     }
@@ -113,8 +113,8 @@ const NavTwo: React.FC<NavTwoProps> = ({
     useEffect(() => {
         if (selectedRecipients.length || selectedDocuments.length) return;
         (async () => {
-            selectedRecipients.length === 0 && await dispatch(fetchRecipients({ accountId, transactionId }));
-            selectedDocuments.length === 0 && await dispatch(fetchDocuments({ accountId, transactionId }));
+            selectedRecipients.length == 0 && await dispatch(fetchRecipients({ accountId, transactionId }));
+            selectedDocuments.length == 0 && await dispatch(fetchDocuments({ accountId, transactionId }));
         })()
     }, [])
 
@@ -134,7 +134,7 @@ const NavTwo: React.FC<NavTwoProps> = ({
                     minRoutingOrder = recipient.routingOrder;
                 }
 
-                if (recipient.email === userDetails.email) {
+                if (recipient.email == userDetails.email) {
                     userEmailPresent.present = true;
                     userEmailPresent.routingOrder = recipient.routingOrder;
                     userEmailPresent.recipientId = recipient.id;
@@ -142,7 +142,7 @@ const NavTwo: React.FC<NavTwoProps> = ({
                 }
             }
 
-            if (userEmailPresent.present && userEmailPresent.routingOrder === minRoutingOrder && userEmailPresent.type !== recipientType.CC && userEmailPresent.type !== recipientType.INPERSONSIGNER) {
+            if (userEmailPresent.present && userEmailPresent.routingOrder == minRoutingOrder && userEmailPresent.type != recipientType.CC && userEmailPresent.type != recipientType.INPERSONSIGNER) {
                 setSelfUserSign({ sign: true, recipientId: userEmailPresent.recipientId })
             }
         }
@@ -177,13 +177,13 @@ const NavTwo: React.FC<NavTwoProps> = ({
             return
         }
 
-        // if (isSend === null) {
+        // if (isSend == null) {
         //     setIsSend(false);
         // }
         // setIsSend(!isSend);
 
         // setTimeout(() => {
-            if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
+            if (transactionTemplateToggle == TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
                 if (isSignSend) {
                     window.open(`./../../../sign/${selfUserSign.recipientId}`, "_self");
                 }
@@ -205,7 +205,7 @@ const NavTwo: React.FC<NavTwoProps> = ({
 
     useEffect(() => {
         let indx = fitObj[selFitIndx].value
-        if (indx === "FIT") {
+        if (indx == "FIT") {
             indx = "100";
         }
         zoom(Number(indx), 'zoom-con')
@@ -263,7 +263,7 @@ const NavTwo: React.FC<NavTwoProps> = ({
 
                                         className='flex items-center justify-between w-full'>
                                         <p className='whitespace-nowrap overflow-hidden text-ellipsis max-w-[12ch]'>{val.label}</p>
-                                        {selFitIndx === indx && <FaCheck className='text-sm text-slate-400' />}
+                                        {selFitIndx == indx && <FaCheck className='text-sm text-slate-400' />}
                                     </div>
                                 </div>)
                             })
@@ -387,11 +387,11 @@ const NavTwo: React.FC<NavTwoProps> = ({
                             onClick={() => handleSend()}
                             className='flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-sm bg-[var(--primary)]'>
                             <p className='tracking-wide text-white'>
-                                {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES ? "Save" : "Send"}
+                                {transactionTemplateToggle == TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES ? "Save" : "Send"}
                             </p>
                             <FaSignature className='text-white text-md' />
                         </div>
-                        {/* {transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && selfUserSign.sign && <div
+                        {/* {transactionTemplateToggle != TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && selfUserSign.sign && <div
                             id='send-and-sign-dash-btn'
                             onClick={() => handleSend(selfUserSign.sign)}
                             className='flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-sm bg-[var(--primary)]'>
diff --git a/src/components/process/processStepTwo/ProcessStepTwo.tsx b/src/components/process/processStepTwo/ProcessStepTwo.tsx
index 61679d8..ecdb856 100644
--- a/src/components/process/processStepTwo/ProcessStepTwo.tsx
+++ b/src/components/process/processStepTwo/ProcessStepTwo.tsx
@@ -5,11 +5,12 @@ import LeftSideBar from './LeftSideBar';
 import DocumentContainer, { DocumentContainerRef } from './DocumentContainer';
 
 import { useDispatch, useSelector } from 'react-redux';
-import { RootState } from '../../../store/store';
+import { AppDispatch, RootState } from '../../../store/store';
 import Loader from '../../dashboard/Loader';
 import { hideLoader } from '../../../store/slices/loaderSlice';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import api from '../../../config/api';
+import { toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice';
 
 export interface IsSendInterface {
   send: boolean | null;
@@ -17,6 +18,23 @@ export interface IsSendInterface {
 }
 
 const ProcessStepTwo = () => {
+  let transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS;
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  const params = useParams<{ accountId?: string; transactionId?: string; templateId?: string }>();
+  let accountId = params.accountId;
+  let transactionId = params.transactionId
+  if (!transactionId) {
+    transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES;
+    transactionId = params.templateId;
+    dispatch(toggleToTemplates());
+  }
+  if (!accountId || !transactionId) {
+    window.location.href = "/";
+    return null;
+  }
+
   const windowWidth = window.innerWidth;
 
   const [isFields, setIsFields] = useState(windowWidth > 638 ? true : false);
@@ -28,8 +46,7 @@ const ProcessStepTwo = () => {
 
   const [isSend, setIsSend] = useState<boolean | null>(null);
   const globalLoader = useSelector((state: RootState) => state.loader)
-  const dispatch = useDispatch();
-  const navigate = useNavigate();
+
 
   useEffect(() => {
     setTimeout(() => {
@@ -37,20 +54,34 @@ const ProcessStepTwo = () => {
     }, 800)
   }, [])
 
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await api.get(`/api/v1/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`);
+        if (res.data.status === "COMPLETED" || res.data.status === "SENT") {
+          navigate("/")
+          return;
+        }
+      } catch (e) {
+      }
+    })()
+
+  }, [])
+
 
   const handleSetIsFields = (setTo: boolean) => {
-    if (setTo !== undefined && setTo !== isFields) {
+    if (setTo != undefined && setTo != isFields) {
       setIsFields(setTo)
-      if (setTo === true) {
+      if (setTo == true) {
         setIsPages(false)
       }
     };
   }
 
   const handleSetIsPages = (setTo: boolean) => {
-    if (setTo !== undefined && setTo !== isPages) {
+    if (setTo != undefined && setTo != isPages) {
       setIsPages(setTo)
-      if (setTo === true) {
+      if (setTo == true) {
         setIsFields(false)
       }
     };
diff --git a/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx b/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx
index bd17bd1..3d21aae 100644
--- a/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx
+++ b/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx
@@ -110,14 +110,14 @@ const RightSideBar: React.FC<DroppedItemProps> = (
     const [styleOpen, setStyleOpen] = useState(false);
 
     const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number | StylesInterface, is24Hrs = null) => {
-        if (changeTo === '') return
+        if (changeTo == '') return
 
         if (!signClient) {
             setDroppedItems((prev) => {
 
                 const updatedItems = Array.isArray(prev[selTagKey])
                     ? prev[selTagKey].map((item, i) =>
-                        i === selTagIndx ? { ...item, [changeTo]: changeWith, update: true } : item
+                        i == selTagIndx ? { ...item, [changeTo]: changeWith, update: true } : item
                     )
                     : [];
 
@@ -129,7 +129,7 @@ const RightSideBar: React.FC<DroppedItemProps> = (
         } else {
             setDroppedItems((prev) => {
                 return (prev.map((item, idx) => {
-                    if (idx === selTagIndx) {
+                    if (idx == selTagIndx) {
                         return { ...item, [changeTo]: changeWith, update: true }
                     }
                     return item;
@@ -141,12 +141,12 @@ const RightSideBar: React.FC<DroppedItemProps> = (
     }
 
     useEffect(() => {
-        if (selectedTag.label === "temporal" && !("dateFormat" in selectedTag)) {
+        if (selectedTag.label == "temporal" && !("dateFormat" in selectedTag)) {
             handlePropertyChange("dateFormat", TEMPORAL.DATE);
             handlePropertyChange("format", "DD/MM/YY");
         }
 
-        if (selectedTag.label === TagsTypes.TEXT && !("multiLine" in selectedTag)) {
+        if (selectedTag.label == TagsTypes.TEXT && !("multiLine" in selectedTag)) {
             handlePropertyChange("multiLine", true);
         }
     }, [selectedTag])
@@ -158,8 +158,8 @@ const RightSideBar: React.FC<DroppedItemProps> = (
     }
 
     useEffect(() => {
-        if (selectedTag.decimalPlace === undefined) return;
-        if (selectedTag.decimalPlace === decimalPlace) return;
+        if (selectedTag.decimalPlace == undefined) return;
+        if (selectedTag.decimalPlace == decimalPlace) return;
         setDecimalPlace(selectedTag.decimalPlace ?? 0)
     }, [selectedTag.decimalPlace ?? 0])
 
@@ -214,7 +214,7 @@ const RightSideBar: React.FC<DroppedItemProps> = (
                 ...droppedItems,
                 [selTagKey]: Array.isArray(droppedItems[selTagKey])
                     ? droppedItems[selTagKey].map((item, i) =>
-                        i === selTagIndx
+                        i == selTagIndx
                             ? { ...item, dimensions: { ...item.dimensions, left: newLeft, top: newTop }, update: true }
                             : item
                     )
@@ -249,7 +249,7 @@ const RightSideBar: React.FC<DroppedItemProps> = (
                 ...droppedItems,
                 [selTagKey]: Array.isArray(droppedItems[selTagKey])
                     ? droppedItems[selTagKey].map((item, i) =>
-                        i === selTagIndx
+                        i == selTagIndx
                             ? {
                                 ...item,
                                 dimensions: {
@@ -306,12 +306,12 @@ const RightSideBar: React.FC<DroppedItemProps> = (
                     <DirectionalControls {...DirectionalControlsProps} selectedType={selectedTag.dimensions} />
 
                     {
-                        (selectedTag.type !== TagsTypes.SIGNATURE && selectedTag.type !== TagsTypes.INITIALS) &&
+                        (selectedTag.type != TagsTypes.SIGNATURE && selectedTag.type != TagsTypes.INITIALS) &&
                         <RequiredAttr required={selectedTag.required ? selectedTag.required : false} handlePropertyChange={handlePropertyChange} />
                     }
 
                     {
-                        selectedTag.type.toLowerCase() === TagsTypes.TEMPORAL &&
+                        selectedTag.type.toLowerCase() == TagsTypes.TEMPORAL &&
                         <CurrTimeStampAttr type={selectedTag.type} handlePropertyChange={handlePropertyChange} />
                     }
 
@@ -342,7 +342,7 @@ const RightSideBar: React.FC<DroppedItemProps> = (
 
                     {/* Mask Type  */}
                     {
-                        selectedTag.type.toLowerCase() === TagsTypes.TEXT &&
+                        selectedTag.type.toLowerCase() == TagsTypes.TEXT &&
                         <TextValueFIll
                             value={selectedTag.value ?? ""}
                             multiLine={selectedTag.multiLine ?? false}
@@ -352,9 +352,9 @@ const RightSideBar: React.FC<DroppedItemProps> = (
 
                     {/* TEMPORAL DATE FORMAT - START */}
                     {
-                        selectedTag && (selectedTag?.dateFormat === TEMPORAL.DATE ||
-                            selectedTag?.dateFormat === TEMPORAL.TIME ||
-                            selectedTag?.dateFormat === TEMPORAL.DATE_TIME) &&
+                        selectedTag && (selectedTag?.dateFormat == TEMPORAL.DATE ||
+                            selectedTag?.dateFormat == TEMPORAL.TIME ||
+                            selectedTag?.dateFormat == TEMPORAL.DATE_TIME) &&
                         <TemporalDateAttr
                             dateFormat={selectedTag.dateFormat ?? TEMPORAL.DATE_TIME}
                             format={selectedTag.format}
@@ -367,7 +367,7 @@ const RightSideBar: React.FC<DroppedItemProps> = (
 
                     {/* NUMBER - DECIMAL PLACES */}
                     {
-                        selectedTag?.type.toLowerCase() === TagsTypes.NUMBER &&
+                        selectedTag?.type.toLowerCase() == TagsTypes.NUMBER &&
                         <div>
                             <label htmlFor="" className="font-medium">Decimal Places</label>
                             <input
@@ -379,7 +379,7 @@ const RightSideBar: React.FC<DroppedItemProps> = (
                     }
 
                     {
-                        (selectedTag.type.toLowerCase() === TagsTypes.SELECT) &&
+                        (selectedTag.type.toLowerCase() == TagsTypes.SELECT) &&
                         <SelectTagAttr
                             options={selectedTag.options ?? []}
                             selTagKey={selTagKey}
@@ -390,11 +390,11 @@ const RightSideBar: React.FC<DroppedItemProps> = (
                     }
 
                     {
-                        (selectedTag.type.toLowerCase() === TagsTypes.TEXT || selectedTag.type.toLowerCase() === TagsTypes.COMPANY) &&
+                        (selectedTag.type.toLowerCase() == TagsTypes.TEXT || selectedTag.type.toLowerCase() == TagsTypes.COMPANY) &&
                         <MaxMinLenAttr maxLength={selectedTag.maxLength} minLength={selectedTag.minLength} handlePropertyChange={handlePropertyChange} />
                     }
 
-                    {(selectedTag.type.toLowerCase() !== TagsTypes.SIGNATURE && selectedTag.type.toLowerCase() !== TagsTypes.INITIALS) &&
+                    {(selectedTag.type.toLowerCase() != TagsTypes.SIGNATURE && selectedTag.type.toLowerCase() != TagsTypes.INITIALS) &&
                         <div className="">
                             <div className="flex items-center justify-between mr-2 cursor-pointer"
                                 onClick={() => setStyleOpen(!styleOpen)}
diff --git a/src/components/process/processStepTwo/rightSideBar/attributes/CommonAttrDropDown.tsx b/src/components/process/processStepTwo/rightSideBar/attributes/CommonAttrDropDown.tsx
index 0b757e3..e60cf3d 100644
--- a/src/components/process/processStepTwo/rightSideBar/attributes/CommonAttrDropDown.tsx
+++ b/src/components/process/processStepTwo/rightSideBar/attributes/CommonAttrDropDown.tsx
@@ -21,13 +21,13 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
 
     switch (selectedTag.type.toLowerCase()) {
         case "number":
-            if (selectedTag.decimalPlace === undefined) {
+            if (selectedTag.decimalPlace == undefined) {
                 subType = NUMBER.INTEGER;
                 subTypeKey = "decimalPlace";
-            } else if (selectedTag.isCurrency !== undefined && selectedTag.isCurrency) {
+            } else if (selectedTag.isCurrency != undefined && selectedTag.isCurrency) {
                 subType = NUMBER.CURRENCY;
                 subTypeKey = "isCurrency";
-            } else if (selectedTag.decimalPlace === 0) {
+            } else if (selectedTag.decimalPlace == 0) {
                 subType = NUMBER.INTEGER;
                 subTypeKey = "decimalPlace";
             } else if (selectedTag.decimalPlace > 0) {
@@ -36,7 +36,7 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
             }
             break;
         case "text":
-            if (selectedTag.multiLine === undefined) {
+            if (selectedTag.multiLine == undefined) {
                 subType = TEXT.PARAGRAPH
             } else if (selectedTag.multiLine) {
                 subType = TEXT.PARAGRAPH;
@@ -44,12 +44,12 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
                 subType = TEXT.SINGLE_LINE;
             }
 
-            if ("maskType" in selectedTag && selectedTag.maskType !== null && selectedTag.maskType?.length) subType = TEXT.PASSWORD;
+            if ("maskType" in selectedTag && selectedTag.maskType != null && selectedTag.maskType?.length) subType = TEXT.PASSWORD;
 
             subTypeKey = "multiLine";
             break;
         case "temporal":
-            if (selectedTag.dateFormat === undefined) {
+            if (selectedTag.dateFormat == undefined) {
                 subType = TEMPORAL.DATE;
             } else {
                 subType = TEMPORAL[selectedTag.dateFormat.toUpperCase() as keyof typeof TEMPORAL];
@@ -57,7 +57,7 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
             subTypeKey = "dateFormat";
             break;
         case "select":
-            if (selectedTag.multiSelect !== undefined && selectedTag.multiSelect) {
+            if (selectedTag.multiSelect != undefined && selectedTag.multiSelect) {
                 subType = SELECT.MULTI_SELECT;
             } else {
                 subType = SELECT.SINGLE_SELECT;
@@ -76,14 +76,14 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
         <div className="flex flex-col">
             <label htmlFor="" className="font-medium">Type</label>
             <div
-                onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.TYPE ? null : DROPDOWNTOGGLE.TYPE)}
+                onClick={() => setDropDownToggle(dropDownToggle == DROPDOWNTOGGLE.TYPE ? null : DROPDOWNTOGGLE.TYPE)}
                 className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
                 <p className="capitalize cursor-pointer">{subType}</p>
-                {/* <p className="capitalize cursor-pointer">{subType ? (subType === "date_time" ? "Date Time" : subType) : selectedType[Object.keys(selectedType)[0] as keyof typeof selectedType]}</p> */}
+                {/* <p className="capitalize cursor-pointer">{subType ? (subType == "date_time" ? "Date Time" : subType) : selectedType[Object.keys(selectedType)[0] as keyof typeof selectedType]}</p> */}
                 <MdKeyboardArrowDown />
             </div>
 
-            {dropDownToggle === DROPDOWNTOGGLE.TYPE &&
+            {dropDownToggle == DROPDOWNTOGGLE.TYPE &&
                 <div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded">
                     {Object.keys(selectedType).map((val, indx) => {
 
@@ -92,20 +92,20 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
                         let isPassword = false;
 
                         // Handling NUMBER - START
-                        if (value === NUMBER.INTEGER || value === NUMBER.CURRENCY) {
-                            if (value === NUMBER.CURRENCY) {
+                        if (value == NUMBER.INTEGER || value == NUMBER.CURRENCY) {
+                            if (value == NUMBER.CURRENCY) {
                                 isCurrency = true;
                             }
                             value = 0;
                         }
-                        if (value === NUMBER.DECIMAL) {
+                        if (value == NUMBER.DECIMAL) {
                             value = selectedTag.decimalPlace ?? 0 > 0 ? selectedTag.decimalPlace ?? 2 : 2;
                         }
                         // Handling NUMBER - END
 
                         // Handling SELECT - START
-                        if (subTypeKey === "multiSelect") {
-                            if (value === "multi_select") {
+                        if (subTypeKey == "multiSelect") {
+                            if (value == "multi_select") {
                                 value = true;
                             } else {
                                 value = false
@@ -114,14 +114,14 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
                         // Handling SELECT - END
 
                         // Handling TEXT - START
-                        if (subTypeKey === "multiLine") {
-                            if (value === "single_line") {
+                        if (subTypeKey == "multiLine") {
+                            if (value == "single_line") {
                                 value = false;
                             } else {
                                 value = true;
                             }
 
-                            if (val.toLowerCase() === TEXT.PASSWORD) {
+                            if (val.toLowerCase() == TEXT.PASSWORD) {
                                 isPassword = true;
                             }
                         }
@@ -131,7 +131,7 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
                             <div
                                 key={indx}
                                 onClick={() => {
-                                    if (selectedTag.type.toLowerCase() === TagsTypes.NUMBER) {
+                                    if (selectedTag.type.toLowerCase() == TagsTypes.NUMBER) {
                                         if (isCurrency) {
                                             handlePropertyChange("isCurrency", true);
                                             return;
@@ -139,11 +139,11 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
                                         handlePropertyChange(subTypeKey, value as number);
                                         if (selectedTag.isCurrency) handlePropertyChange("isCurrency", false)
 
-                                    } else if (selectedTag.type.toLowerCase() === TagsTypes.SELECT) {
+                                    } else if (selectedTag.type.toLowerCase() == TagsTypes.SELECT) {
 
                                         handlePropertyChange(subTypeKey, value as boolean);
 
-                                    } else if (selectedTag.type.toLowerCase() === TagsTypes.TEXT) {
+                                    } else if (selectedTag.type.toLowerCase() == TagsTypes.TEXT) {
                                         if (isPassword) {
                                             handlePropertyChange("maskType", MASKTYPE.ALL.toUpperCase());
                                             handlePropertyChange("maskCharacter", MASKCHARACTER.ASTERISK.toUpperCase());
@@ -154,9 +154,9 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
 
                                         }
                                         handlePropertyChange(subTypeKey, value as boolean);
-                                    } else if (selectedTag.type.toLowerCase() === TagsTypes.TEMPORAL) {
+                                    } else if (selectedTag.type.toLowerCase() == TagsTypes.TEMPORAL) {
                                         handlePropertyChange(subTypeKey, selectedType[val as keyof typeof selectedType]);
-                                        if (subTypeKey === "dateFormat") {
+                                        if (subTypeKey == "dateFormat") {
                                             let format = null;
                                             switch (value) {
                                                 case "date":
@@ -180,7 +180,7 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
                                 }}
                                 className={`capitalize px-2 py-1 hover:bg-slate-200 cursor-pointer`}
                             >
-                                {selectedType[val as keyof typeof selectedType] === "date_time" ? "Date Time" : selectedType[val as keyof typeof selectedType]}
+                                {selectedType[val as keyof typeof selectedType] == "date_time" ? "Date Time" : selectedType[val as keyof typeof selectedType]}
                             </div>
                         )
                     })}
diff --git a/src/components/process/processStepTwo/rightSideBar/attributes/CurrTimeStampAttr.tsx b/src/components/process/processStepTwo/rightSideBar/attributes/CurrTimeStampAttr.tsx
index 0a3a966..4c61339 100644
--- a/src/components/process/processStepTwo/rightSideBar/attributes/CurrTimeStampAttr.tsx
+++ b/src/components/process/processStepTwo/rightSideBar/attributes/CurrTimeStampAttr.tsx
@@ -10,7 +10,7 @@ const CurrTimeStampAttr: React.FC<CurrTimeStampAttrInt> = ({ type, handlePropert
     const [isCurrentTimeStamp, setIsCurrentTimeStamp] = useState<boolean>(true);
 
     const handleIsCurrentTimeStamp = (checked: boolean) => {
-        if (type.toLowerCase() === "temporal") {
+        if (type.toLowerCase() == "temporal") {
             setIsCurrentTimeStamp(checked)
             handlePropertyChange("currentTimeStamp", checked);
         }
diff --git a/src/components/process/processStepTwo/rightSideBar/attributes/DirectionalControls.tsx b/src/components/process/processStepTwo/rightSideBar/attributes/DirectionalControls.tsx
index 4711717..1473ed2 100644
--- a/src/components/process/processStepTwo/rightSideBar/attributes/DirectionalControls.tsx
+++ b/src/components/process/processStepTwo/rightSideBar/attributes/DirectionalControls.tsx
@@ -45,14 +45,14 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
   };
 
   const handlePositionInputChange = (type: 'left' | 'top', value: string) => {
-    if (type === 'left') setLeftValue(value);
+    if (type == 'left') setLeftValue(value);
     else setTopValue(value);
   };
 
   const handlePositionInputBlur = (type: 'left' | 'top') => {
     if (!onPositionChange) return;
 
-    const numericValue = parseFloat(type === 'left' ? leftValue : topValue);
+    const numericValue = parseFloat(type == 'left' ? leftValue : topValue);
     if (isNaN(numericValue)) {
       const { top = 0, left = 0 } = selectedType || {};
       setLeftValue(Math.round(left).toString());
@@ -61,14 +61,14 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
     }
 
     const { top = 0, left = 0 } = selectedType || {};
-    const newLeft = type === 'left' ? numericValue : left;
-    const newTop = type === 'top' ? numericValue : top;
+    const newLeft = type == 'left' ? numericValue : left;
+    const newTop = type == 'top' ? numericValue : top;
 
     onPositionChange(newLeft, newTop);
   };
 
   const handleKeyPress = (e: React.KeyboardEvent, type: 'left' | 'top') => {
-    if (e.key === 'Enter') {
+    if (e.key == 'Enter') {
       e.preventDefault();
       handlePositionInputBlur(type)
     };
diff --git a/src/components/process/processStepTwo/rightSideBar/attributes/MaskTypePassAttr.tsx b/src/components/process/processStepTwo/rightSideBar/attributes/MaskTypePassAttr.tsx
index 1008f52..e00d084 100644
--- a/src/components/process/processStepTwo/rightSideBar/attributes/MaskTypePassAttr.tsx
+++ b/src/components/process/processStepTwo/rightSideBar/attributes/MaskTypePassAttr.tsx
@@ -19,14 +19,14 @@ const MaskTypePassAttr: React.FC<MaskTypePassAttrInt> = ({ maskType, maskCharact
             <div>
                 <label htmlFor="" className="">Mask Type</label>
                 <div
-                    onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.MASK_TYPE ? null : DROPDOWNTOGGLE.MASK_TYPE)}
+                    onClick={() => setDropDownToggle(dropDownToggle == DROPDOWNTOGGLE.MASK_TYPE ? null : DROPDOWNTOGGLE.MASK_TYPE)}
                     className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
                     <p className="capitalize cursor-pointer">{(maskType && maskType.replace("_", " ")) ? maskType : MASKTYPE.ALL}</p>
                     <MdKeyboardArrowDown />
                 </div>
 
                 {
-                    dropDownToggle === DROPDOWNTOGGLE.MASK_TYPE &&
+                    dropDownToggle == DROPDOWNTOGGLE.MASK_TYPE &&
                     <div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded">
                         {(Object.keys(MASKTYPE) as (keyof typeof MASKTYPE)[]).map((val, indx) =>
                         (
@@ -47,14 +47,14 @@ const MaskTypePassAttr: React.FC<MaskTypePassAttrInt> = ({ maskType, maskCharact
             <div>
                 <label htmlFor="" className="">Mask Character</label>
                 <div
-                    onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.MASK_CHARACTER ? null : DROPDOWNTOGGLE.MASK_CHARACTER)}
+                    onClick={() => setDropDownToggle(dropDownToggle == DROPDOWNTOGGLE.MASK_CHARACTER ? null : DROPDOWNTOGGLE.MASK_CHARACTER)}
                     className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
                     <p className="capitalize cursor-pointer py-1">
                         {maskCharacter
                             ?
-                            maskCharacter === MASKCHARACTER.ASTERISK && <LuAsterisk /> ||
-                            maskCharacter === MASKCHARACTER.DOT && <GoDotFill /> ||
-                            maskCharacter === MASKCHARACTER.X && <IoClose />
+                            maskCharacter == MASKCHARACTER.ASTERISK && <LuAsterisk /> ||
+                            maskCharacter == MASKCHARACTER.DOT && <GoDotFill /> ||
+                            maskCharacter == MASKCHARACTER.X && <IoClose />
                             :
                             <LuAsterisk />
                         }
@@ -65,7 +65,7 @@ const MaskTypePassAttr: React.FC<MaskTypePassAttrInt> = ({ maskType, maskCharact
                 </div>
 
                 {
-                    dropDownToggle === DROPDOWNTOGGLE.MASK_CHARACTER &&
+                    dropDownToggle == DROPDOWNTOGGLE.MASK_CHARACTER &&
                     <div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded">
                         {(Object.keys(MASKCHARACTER) as (keyof typeof MASKCHARACTER)[]).map((val, indx) =>
                         (
@@ -75,15 +75,15 @@ const MaskTypePassAttr: React.FC<MaskTypePassAttrInt> = ({ maskType, maskCharact
                                 className="capitalize p-2 hover:bg-slate-200 cursor-pointer"
                             >
                                 {
-                                    MASKCHARACTER[val] === MASKCHARACTER.ASTERISK &&
+                                    MASKCHARACTER[val] == MASKCHARACTER.ASTERISK &&
                                     <LuAsterisk />
                                 }
                                 {
-                                    MASKCHARACTER[val] === MASKCHARACTER.DOT &&
+                                    MASKCHARACTER[val] == MASKCHARACTER.DOT &&
                                     <GoDotFill />
                                 }
                                 {
-                                    MASKCHARACTER[val] === MASKCHARACTER.X &&
+                                    MASKCHARACTER[val] == MASKCHARACTER.X &&
                                     <IoClose />
                                 }
                             </div>
diff --git a/src/components/process/processStepTwo/rightSideBar/attributes/MaxMinLenAttr.tsx b/src/components/process/processStepTwo/rightSideBar/attributes/MaxMinLenAttr.tsx
index 642ab27..1146531 100644
--- a/src/components/process/processStepTwo/rightSideBar/attributes/MaxMinLenAttr.tsx
+++ b/src/components/process/processStepTwo/rightSideBar/attributes/MaxMinLenAttr.tsx
@@ -15,7 +15,7 @@ const MaxMinLenAttr: React.FC<MaxMinLenAttrIntr> = ({ maxLength, minLength, hand
             firstChangedField.current = 'maxLength';
         }
 
-        if (firstChangedField.current === 'minLength' && newMax < minLength) {
+        if (firstChangedField.current == 'minLength' && newMax < minLength) {
             alert(`Max Length must be greater than or equal to Min Length (${minLength})`);
             return;
         }
@@ -29,7 +29,7 @@ const MaxMinLenAttr: React.FC<MaxMinLenAttrIntr> = ({ maxLength, minLength, hand
             firstChangedField.current = 'minLength';
         }
 
-        if (firstChangedField.current === 'maxLength' && newMin > maxLength) {
+        if (firstChangedField.current == 'maxLength' && newMin > maxLength) {
             alert(`Min Length must be less than or equal to Max Length (${maxLength})`);
             return;
         }
diff --git a/src/components/process/processStepTwo/rightSideBar/attributes/RecipientsAttrCon.tsx b/src/components/process/processStepTwo/rightSideBar/attributes/RecipientsAttrCon.tsx
index 9d5a04e..a61f4e6 100644
--- a/src/components/process/processStepTwo/rightSideBar/attributes/RecipientsAttrCon.tsx
+++ b/src/components/process/processStepTwo/rightSideBar/attributes/RecipientsAttrCon.tsx
@@ -56,8 +56,8 @@ const RecipientsAttrCon: React.FC<RecipientsAttrConIntr> = ({ selectedRecipientI
                         {/* <FaUserTie className='w-3 h-3 text-2xl mt-[1px]' style={{ color: selectedRecipient.color }} /> */}
                         <p>
                             {
-                                selectedRecipient.firstName.length === 0 && selectedRecipient.lastName.length === 0 ?
-                                    (selectedRecipient.email.length === 0 ? selectedRecipient.roleName : selectedRecipient.email) :
+                                selectedRecipient.firstName.length == 0 && selectedRecipient.lastName.length == 0 ?
+                                    (selectedRecipient.email.length == 0 ? selectedRecipient.roleName : selectedRecipient.email) :
                                     `${selectedRecipient.firstName + " " + selectedRecipient.lastName}`
                             }
                         </p>
@@ -68,7 +68,7 @@ const RecipientsAttrCon: React.FC<RecipientsAttrConIntr> = ({ selectedRecipientI
                 <div
                     className={`absolute w-full shadow-md rounded-md mt-1 px-2 py-1 z-20 bg-white ${dropDownToggle ? '' : 'hidden'}`}>
                     {selectedRecipients.length && selectedRecipients.map((recipient, indx) => {
-                        if (recipient.type === recipientType.CC) return null; // Skip CC recipients
+                        if (recipient.type == recipientType.CC) return null; // Skip CC recipients
                         return (<div
                             key={indx}
                             className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-pointer hover:bg-slate-100'
@@ -84,13 +84,13 @@ const RecipientsAttrCon: React.FC<RecipientsAttrConIntr> = ({ selectedRecipientI
                                 {/* <FaUser className='w-3 h-3 text-2xl mt-[1px]' style={{ color: recipient.color }} /> */}
                                 <p>
                                     {
-                                        recipient.firstName.length === 0 && recipient.lastName.length === 0 ?
-                                            (recipient.email.length === 0 ? recipient.roleName : recipient.email) :
+                                        recipient.firstName.length == 0 && recipient.lastName.length == 0 ?
+                                            (recipient.email.length == 0 ? recipient.roleName : recipient.email) :
                                             `${recipient.firstName + " " + recipient.lastName}`
                                     }
                                 </p>
                             </div>
-                            {selectedRecipientId === recipient.id && <IoCheckmark className='text-[var(--primary)]' />}
+                            {selectedRecipientId == recipient.id && <IoCheckmark className='text-[var(--primary)]' />}
                         </div>)
                     })}
                 </div>
diff --git a/src/components/process/processStepTwo/rightSideBar/attributes/SelectTagAttr.tsx b/src/components/process/processStepTwo/rightSideBar/attributes/SelectTagAttr.tsx
index 809863c..349fa81 100644
--- a/src/components/process/processStepTwo/rightSideBar/attributes/SelectTagAttr.tsx
+++ b/src/components/process/processStepTwo/rightSideBar/attributes/SelectTagAttr.tsx
@@ -25,7 +25,7 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
 
                 if (Array.isArray(prev)) {
                     newState = prev.map((item, indx) => {
-                        if (indx === selTagIndx) {
+                        if (indx == selTagIndx) {
                             return {
                                 ...item,
                                 options: item.options ? [...item.options, { ...selectedOption }] : [{ ...selectedOption }],
@@ -39,7 +39,7 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
                         ...prev,
                         [selTagKey]: Array.isArray(prev[selTagKey])
                             ? prev[selTagKey].map((item, i) => {
-                                if (i === selTagIndx) {
+                                if (i == selTagIndx) {
                                     return {
                                         ...item,
                                         options: item.options ? [...item.options, { ...selectedOption }] : [{ ...selectedOption }],
@@ -65,9 +65,9 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
 
             if (Array.isArray(prev)) {
                 newState = prev.map((item, indx) => {
-                    if (indx === selTagIndx) {
+                    if (indx == selTagIndx) {
                         return {
-                            ...item, options: item.options ? item.options.filter((_, i) => i !== indx) : []
+                            ...item, options: item.options ? item.options.filter((_, i) => i != indx) : []
                         };
                     }
                     return item;
@@ -77,8 +77,8 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
                     ...prev,
                     [selTagKey]: Array.isArray(prev[selTagKey])
                         ? prev[selTagKey].map((item, i) => {
-                            if (i === selTagIndx) {
-                                return { ...item, options: item.options ? item.options.filter((_, i) => i !== indx) : [] };
+                            if (i == selTagIndx) {
+                                return { ...item, options: item.options ? item.options.filter((_, i) => i != indx) : [] };
                             }
                             return item;
                         })
@@ -99,7 +99,7 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
                     onChange={(e) => setSelectedOption({ label: e.target.value, value: e.target.value })}
                     // value={selectedOption}
                     onKeyUp={(e) => {
-                        if (e.code === "Enter") {
+                        if (e.code == "Enter") {
                             e.currentTarget.value = "";
                             handleAddSelectOption();
                         }
@@ -116,7 +116,7 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
                                 <IoMdClose
                                     onClick={() =>
                                         // setSelectedOptions(prev =>
-                                        //     prev.filter((_, i) => i !== indx)
+                                        //     prev.filter((_, i) => i != indx)
                                         // )
                                         handleSelectOptionDel(indx)
                                     }
diff --git a/src/components/process/processStepTwo/rightSideBar/attributes/TemporalDateAttr.tsx b/src/components/process/processStepTwo/rightSideBar/attributes/TemporalDateAttr.tsx
index 510bdc4..177db18 100644
--- a/src/components/process/processStepTwo/rightSideBar/attributes/TemporalDateAttr.tsx
+++ b/src/components/process/processStepTwo/rightSideBar/attributes/TemporalDateAttr.tsx
@@ -28,7 +28,7 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, s
     let is24HourFormat = true
 
     if (selectedTag.format && selectedTag.format.split(/hh|mm/).length > 0) {
-        if ((selectedTag.format.split(/:mm/)[0]).at(-1) === "h") {
+        if ((selectedTag.format.split(/:mm/)[0]).at(-1) == "h") {
             is24HourFormat = false;
         }
     }
@@ -37,14 +37,14 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, s
     const [is24Hrs, setIs24Hrs] = useState<boolean>(is24HourFormat);
 
     const handleIs24HrsClick = (checked: boolean) => {
-        if (dateFormat === TEMPORAL.TIME) {
+        if (dateFormat == TEMPORAL.TIME) {
             if (!checked) {
                 handlePropertyChange("format", timeFormats[1].format, !is24Hrs)
             } else {
                 handlePropertyChange("format", timeFormats[0].format, is24Hrs)
             }
         }
-        else if (dateFormat === TEMPORAL.DATE_TIME) {
+        else if (dateFormat == TEMPORAL.DATE_TIME) {
             const timeFormat = format = timeFormats[checked ? 0 : 1].format;
             const dateFormat = selectedTag.format && selectedTag.format.split(/hh|HH/)[0]
             handlePropertyChange("format", dateFormat+" "+timeFormat, checked ? is24Hrs : !is24Hrs)
@@ -53,9 +53,9 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, s
     }
 
     useEffect(() => {
-        if (format === timeFormats[1].format && is24Hrs) {
+        if (format == timeFormats[1].format && is24Hrs) {
             setIs24Hrs(false);
-        } else if (format === timeFormats[0].format && !is24Hrs) {
+        } else if (format == timeFormats[0].format && !is24Hrs) {
             setIs24Hrs(true);
         }
     }, [format])
@@ -64,7 +64,7 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, s
         <div>
             <div className="flex justify-between">
                 <label htmlFor="" className="font-medium">Formats</label>
-                {(dateFormat === TEMPORAL.DATE_TIME || dateFormat === TEMPORAL.TIME) &&
+                {(dateFormat == TEMPORAL.DATE_TIME || dateFormat == TEMPORAL.TIME) &&
                     <div className="flex justify-center items-center gap-1.5">
                         <input
                             checked={is24Hrs ? is24Hrs : false}
@@ -79,22 +79,22 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, s
             </div>
 
             <div
-                onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.DDMMYY_FORMAT ? null : DROPDOWNTOGGLE.DDMMYY_FORMAT)}
+                onClick={() => setDropDownToggle(dropDownToggle == DROPDOWNTOGGLE.DDMMYY_FORMAT ? null : DROPDOWNTOGGLE.DDMMYY_FORMAT)}
                 className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
                 <p className="cursor-pointer py-1">
                     {format ? format : dateTimeFormatMap['date'][0].format}
-                    {/* {(dateFormat !== TEMPORAL.DATE && dateFormat !== TEMPORAL.TIME) ? (is24Hrs ? " " + timeFormats[0].format : " " + timeFormats[1].format) : ""} */}
+                    {/* {(dateFormat != TEMPORAL.DATE && dateFormat != TEMPORAL.TIME) ? (is24Hrs ? " " + timeFormats[0].format : " " + timeFormats[1].format) : ""} */}
                 </p>
                 <MdKeyboardArrowDown />
             </div>
 
             {
-                dropDownToggle === DROPDOWNTOGGLE.DDMMYY_FORMAT &&
+                dropDownToggle == DROPDOWNTOGGLE.DDMMYY_FORMAT &&
                 <div className="shadow bg-slate-100 mt-1 border-[1px] max-h-[200px] overflow-y-auto border-slate-100 rounded">
                     {dateTimeFormatMap[dateFormat].map((valObj, indx) => {
                         // let val = showFormatEg ? valObj["example"] : valObj["format"]
                         let val = valObj["format"]
-                        if (dateFormat === TEMPORAL.DATE_TIME) {
+                        if (dateFormat == TEMPORAL.DATE_TIME) {
                             if (is24Hrs) {
                                 val = val+" "+timeFormats[0].format;
                             } else {
diff --git a/src/components/routes_helper/ProtectedRoute.tsx b/src/components/routes_helper/ProtectedRoute.tsx
index d694725..97e27b6 100644
--- a/src/components/routes_helper/ProtectedRoute.tsx
+++ b/src/components/routes_helper/ProtectedRoute.tsx
@@ -9,7 +9,7 @@ const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
 
   useLayoutEffect(() => {
     // Fetch only if we don't have user data yet
-    if (user.id === null && user.loading === false) {
+    if (user.id == null && user.loading == false) {
       dispatch(fetchUserDetails());
     }
   }, [dispatch, user, status]);
diff --git a/src/components/setting/AsideSection.tsx b/src/components/setting/AsideSection.tsx
index 60836e3..b838440 100644
--- a/src/components/setting/AsideSection.tsx
+++ b/src/components/setting/AsideSection.tsx
@@ -15,7 +15,7 @@ const AsideSection = ({
   mainTabTitle
 }: AsideSectionProps) => {
   // If no subsections, don't render the aside navigation
-  if (subSections.length === 0) {
+  if (subSections.length == 0) {
     return null;
   }
 
@@ -31,7 +31,7 @@ const AsideSection = ({
               onSubSectionClick(subSection.id);
             }}
             className={`flex items-center gap-2 w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 hover:bg-gray-50 cursor-pointer no-underline ${
-              activeSubSection === subSection.id
+              activeSubSection == subSection.id
                 ? "bg-[#F4F9FF] text-[var(--primary)]"
                 : "text-gray-600 hover:text-gray-800 hover:bg-gray-50"
             }`}
diff --git a/src/components/setting/ContactForm.tsx b/src/components/setting/ContactForm.tsx
index e81732c..b30bc1a 100644
--- a/src/components/setting/ContactForm.tsx
+++ b/src/components/setting/ContactForm.tsx
@@ -55,7 +55,7 @@ const ContactForm = ({ onSubmit, loading }: Props) => {
 //   };
 
 //   const removePhoneField = (index: number) => {
-//     const updatedPhone = formData.phone.filter((_, i) => i !== index);
+//     const updatedPhone = formData.phone.filter((_, i) => i != index);
 //     setFormData((prev) => ({ ...prev, phone: updatedPhone }));
 //   };
 
diff --git a/src/components/setting/CreateAndInvite.tsx b/src/components/setting/CreateAndInvite.tsx
index 5ec4561..a5c3b03 100644
--- a/src/components/setting/CreateAndInvite.tsx
+++ b/src/components/setting/CreateAndInvite.tsx
@@ -89,7 +89,7 @@ const CreateAndInvite = ({
     setAccountSearchTerm(value);
     
     // Clear selected account if user is typing
-    if (selectedAccount && value !== selectedAccount.accountName) {
+    if (selectedAccount && value != selectedAccount.accountName) {
       setSelectedAccount(null);
       setInviteFormData((prev) => ({ ...prev, i_accountName: 0 }));
     }
diff --git a/src/components/setting/Setting.tsx b/src/components/setting/Setting.tsx
index 07032a5..9313094 100644
--- a/src/components/setting/Setting.tsx
+++ b/src/components/setting/Setting.tsx
@@ -146,7 +146,7 @@ const Setting = () => {
     if (hash) {
       // Check if the hash corresponds to a valid subsection
       const allSubSections = getSubSections(activeTab);
-      const validSubSection = allSubSections.find(section => section.id === hash);
+      const validSubSection = allSubSections.find(section => section.id == hash);
 
       if (validSubSection) {
         setActiveSubSection(hash);
@@ -200,7 +200,7 @@ const Setting = () => {
   const renderContent = () => {
     const currentSubSections = getSubSections(activeTab);
 
-    if (currentSubSections.length === 0) {
+    if (currentSubSections.length == 0) {
       // If no subsections, render the main content directly
       switch (activeTab) {
         case "userProfile":
@@ -258,7 +258,7 @@ const Setting = () => {
   // Listen for sessionStorage changes
   useEffect(() => {
     const handleStorageChange = (e: StorageEvent) => {
-      if (e.key === 'activeAccountId') {
+      if (e.key == 'activeAccountId') {
         const newActiveAccountId = e.newValue ? JSON.parse(e.newValue) : null;
         setActiveAccountId(newActiveAccountId);
       }
@@ -269,7 +269,7 @@ const Setting = () => {
 
     // Custom event listener for same-tab changes
     const handleCustomStorageChange = (e: CustomEvent) => {
-      if (e.detail.key === 'activeAccountId') {
+      if (e.detail.key == 'activeAccountId') {
         setActiveAccountId(e.detail.newValue);
       }
     };
@@ -317,11 +317,11 @@ const Setting = () => {
 
     if (subSections.length > 0) {
       // If there's a hash and it's valid for current tab, use it
-      if (hash && subSections.find(s => s.id === hash)) {
+      if (hash && subSections.find(s => s.id == hash)) {
         setActiveSubSection(hash);
       }
       // If no valid hash or no current activeSubSection, use first subsection
-      else if (!activeSubSection || !subSections.find(s => s.id === activeSubSection)) {
+      else if (!activeSubSection || !subSections.find(s => s.id == activeSubSection)) {
         const firstSubSectionId = subSections[0].id;
         setActiveSubSection(firstSubSectionId);
         // Update URL hash if no hash exists
@@ -346,15 +346,15 @@ const Setting = () => {
     try {
       let res;
       let toastMesaage;
-      if (action === 'create') {
+      if (action == 'create') {
         const payloadAccount = {
           name: data.accountName
         }
         res = await api.post(`/api/v1/user/accounts`, payloadAccount)
-        if (res.status === 201) {
+        if (res.status == 201) {
           toastMesaage = `${action.toUpperCase()} Created Successfull...!`
         }
-      } else if (action === 'invite') {
+      } else if (action == 'invite') {
         const payloadInvite = {
           email: data.email,
           role: data.role
@@ -391,7 +391,7 @@ const Setting = () => {
     try {
       setCreateAndInviteLoader(true);
       const res = await api.post(`/api/v1/accounts/${activeAccountId}/contacts`, [data]);
-      if (res.status === 200) {
+      if (res.status == 200) {
         toast.success('Contact created successfully!', {
           position: "top-center",
           autoClose: 1500,
@@ -417,12 +417,12 @@ const Setting = () => {
         <div className="sticky top-0 z-10 bg-white border-b border-gray-200 px-4 md:px-6 lg:px-8 pt-4">
           <div className="flex flex-wrap md:gap-4 ">
             {tabs.map((tab) =>
-              tab.type === page1 && (
+              tab.type == page1 && (
                 <button
                   key={tab.id}
                   onClick={() => handleMainTabClick(tab.id)}
                   className={`cursor-pointer relative px-4 pb-3 text-sm font-medium transition-all duration-200
-              ${activeTab === tab.id
+              ${activeTab == tab.id
                       ? "text-[#34BEFF] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-[#34BEFF] bg-gradient-to-t from-[#E5F6FF] to-transparent"
                       : "text-gray-600 hover:text-[#34BEFF]"
                     }`}
@@ -438,7 +438,7 @@ const Setting = () => {
         <div className="flex-1 min-h-0 flex flex-col lg:flex-row">
 
           {/* Sidebar (hidden on small, shown on lg) */}
-          {activeTab === 'userProfile' && (
+          {activeTab == 'userProfile' && (
             <section className="hidden lg:block flex-shrink-0 w-70 border-r-1 border-slate-200">
               <div className="border-b-1 border-slate-200 py-4 px-6">
                 <div className="flex justify-start items-center gap-2">
@@ -459,14 +459,14 @@ const Setting = () => {
                   activeSubSection={activeSubSection}
                   onSubSectionClick={handleSubSectionClick}
                   subSections={getSubSections(activeTab)}
-                  mainTabTitle={tabs.find(t => t.id === activeTab)?.label || ""}
+                  mainTabTitle={tabs.find(t => t.id == activeTab)?.label || ""}
                 />
               </div>
             </section>
           )}
 
           {/* Sidebar as horizontal nav (only on mobile) */}
-          {activeTab === 'userProfile' && (
+          {activeTab == 'userProfile' && (
             <section className="lg:hidden mb-2">
               <div className="flex overflow-x-auto no-scrollbar gap-4 border-b border-gray-200 pb-2">
                 {getSubSections(activeTab).map((sub) => (
@@ -474,7 +474,7 @@ const Setting = () => {
                     key={sub.id}
                     onClick={() => handleSubSectionClick(sub.id)}
                     className={`whitespace-nowrap text-sm font-medium px-2 py-1 rounded-md
-                ${activeSubSection === sub.id ? "bg-blue-100 text-blue-600" : "text-gray-600"}
+                ${activeSubSection == sub.id ? "bg-blue-100 text-blue-600" : "text-gray-600"}
               `}
                   >
                     {sub.label}
diff --git a/src/components/setting/Signature/AddSignatureModal.tsx b/src/components/setting/Signature/AddSignatureModal.tsx
index 948baf1..7271430 100644
--- a/src/components/setting/Signature/AddSignatureModal.tsx
+++ b/src/components/setting/Signature/AddSignatureModal.tsx
@@ -129,9 +129,9 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
             setActiveTab(editingSignature.signatureType as 'SELECT' | 'DRAW' | 'UPLOAD');
 
             // Set font for SELECT tab
-            const fontOption = signatureOptions.find(option => option.style === editingSignature.font);
+            const fontOption = fontsMap.find(option => option.style == editingSignature.font);
             if (fontOption) {
-                setSelectedSignature({ id: fontOption.id, style: fontOption.style });
+                setSelectedSignature({ id: fontOption.acronym, style: fontOption.style });
             }
 
             // Set signature blobs for all tabs
@@ -142,7 +142,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                 });
 
                 // Set preview URLs for UPLOAD tab
-                if (editingSignature.signatureType === 'UPLOAD') {
+                if (editingSignature.signatureType == 'UPLOAD') {
                     setPreview1(`data:image/png;base64,${editingSignature.signatureBlob}`);
                     setPreview2(`data:image/png;base64,${editingSignature.initialsBlob}`);
                 }
@@ -202,7 +202,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
         setIsSubmitting(true);
 
         // Only validate for DRAW and UPLOAD
-        if ((activeTab === 'DRAW' || activeTab === 'UPLOAD') &&
+        if ((activeTab == 'DRAW' || activeTab == 'UPLOAD') &&
             (!signatures.fullSignature || !signatures.initials)) {
             // alert('Please provide both signature and initials');
             // toast.error('Please provide both signature and initials in draw and upload case', {
@@ -224,15 +224,15 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
             // Base payload
             const payload = {
                 signatureType: activeTab,
-                initials: activeTab === "SELECT" ? initials : "",
+                initials: activeTab == "SELECT" ? initials : "",
                 firstName: fullName.split(' ').length > 1 ? fullName.split(' ')[0] : "",
                 lastName: fullName.split(' ').length > 1 ? fullName.split(' ')[1] : fullName.split(' ')[0],
-                font: activeTab === "SELECT" ? selectedSignature.id : "",
+                font: activeTab == "SELECT" ? selectedSignature.id : "",
                 default: checked
             };
 
             // Only add signatures if not SELECT
-            if (activeTab !== 'SELECT') {
+            if (activeTab != 'SELECT') {
                 payload.signatureBase64 = signatures.fullSignature;
                 payload.initialsBase64 = signatures.initials;
             }
@@ -346,7 +346,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                                     key={opt.acronym}
                                     onClick={() => setSelectedSignature({ id: opt.acronym, style: opt.style })}
                                     className={`cursor-pointer border border-slate-200 rounded-xl p-4 text-center bg-white transition
-                            ${selectedSignature.id === opt.acronym
+                            ${selectedSignature.id == opt.acronym
                                             ? "ring-2 ring-[var(--mainPrimaryBtn)]"
                                             : "hover:shadow-md"}`}
                                 >
@@ -519,17 +519,17 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                                                 <button
                                                     key={item.id}
                                                     onClick={() => setActiveTab(item.id as 'SELECT' | 'DRAW' | 'UPLOAD')}
-                                                    className={`flex items-center justify-start space-x-1 px-2 sm:space-x-2 sm:px-3 py-4 text-sm font-medium transition-all duration-200 whitespace-nowrap ${activeTab === item.id
+                                                    className={`flex items-center justify-start space-x-1 px-2 sm:space-x-2 sm:px-3 py-4 text-sm font-medium transition-all duration-200 whitespace-nowrap ${activeTab == item.id
                                                         ? ' text-[var(--primary)]'
                                                         : 'text-gray-400'
                                                         }`}
                                                 >
-                                                    <span className={activeTab === item.id ? 'text-[var(--mainPrimaryBtn)]' : 'text-gray-400'}>
+                                                    <span className={activeTab == item.id ? 'text-[var(--mainPrimaryBtn)]' : 'text-gray-400'}>
                                                         {item.icon}
                                                     </span>
                                                     <span>{item.label}</span>
                                                 </button>
-                                                {activeTab === item.id && <div className='absolute bottom-[-1px] w-full h-[3px] bg-[var(--mainPrimaryBtn)]'></div>}
+                                                {activeTab == item.id && <div className='absolute bottom-[-1px] w-full h-[3px] bg-[var(--mainPrimaryBtn)]'></div>}
                                             </div>
                                         </>
                                     ))}
diff --git a/src/components/setting/Signature/DrawSignatureCanvas.tsx b/src/components/setting/Signature/DrawSignatureCanvas.tsx
index 2b83131..96018e9 100644
--- a/src/components/setting/Signature/DrawSignatureCanvas.tsx
+++ b/src/components/setting/Signature/DrawSignatureCanvas.tsx
@@ -58,7 +58,7 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
 
         const checkComplete = () => {
             loadedCount++;
-            if (loadedCount === totalToLoad) {
+            if (loadedCount == totalToLoad) {
                 setInitialLoaded(true);
             }
         };
@@ -93,7 +93,7 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
             img2.src = initialSignatures.initials;
         }
 
-        if (totalToLoad === 0) {
+        if (totalToLoad == 0) {
             setInitialLoaded(true);
         }
     };
@@ -103,13 +103,13 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
         const rect = e.currentTarget.getBoundingClientRect();
         const point = { x: e.clientX - rect.left, y: e.clientY - rect.top };
         setCurrentPath([point]);
-        setActiveCanvas(e.currentTarget === canvasRef1.current ? 'full' : 'initials');
+        setActiveCanvas(e.currentTarget == canvasRef1.current ? 'full' : 'initials');
     };
 
     const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>, type: "SIGNATURE" | "INITIAL") => {
         if (!isDrawing) return;
         setIsDrawingType((prev) => {
-            return { ...prev, signatureDrawn: type === "SIGNATURE" ? true : prev.signatureDrawn, initialDrawn: type === "INITIAL" ? true : prev.initialDrawn }
+            return { ...prev, signatureDrawn: type == "SIGNATURE" ? true : prev.signatureDrawn, initialDrawn: type == "INITIAL" ? true : prev.initialDrawn }
         })
         const rect = e.currentTarget.getBoundingClientRect();
         const point = { x: e.clientX - rect.left, y: e.clientY - rect.top };
@@ -148,9 +148,9 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
     const handleMouseUp = () => {
         setIsDrawing(false);
 
-        if (currentPath.length === 0 || !activeCanvas) return;
+        if (currentPath.length == 0 || !activeCanvas) return;
 
-        if (activeCanvas === 'full') {
+        if (activeCanvas == 'full') {
             const newPaths = [...paths1, currentPath];
             setPaths1(newPaths);
         } else {
@@ -217,11 +217,11 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
     };
 
     const undoLastPath = () => {
-        if (activeCanvas === 'full' && paths1.length > 0) {
+        if (activeCanvas == 'full' && paths1.length > 0) {
             const newPaths = paths1.slice(0, -1);
             setPaths1(newPaths);
             redrawCanvas(canvasRef1.current!, newPaths, initialImage1);
-        } else if (activeCanvas === 'initials' && paths2.length > 0) {
+        } else if (activeCanvas == 'initials' && paths2.length > 0) {
             const newPaths = paths2.slice(0, -1);
             setPaths2(newPaths);
             redrawCanvas(canvasRef2.current!, newPaths, initialImage2);
@@ -256,7 +256,7 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
                     {/* <button
                         className="text-xs"
                         onClick={undoLastPath}
-                        disabled={!activeCanvas || (activeCanvas === 'full' ? paths1.length === 0 : paths2.length === 0)}
+                        disabled={!activeCanvas || (activeCanvas == 'full' ? paths1.length == 0 : paths2.length == 0)}
                     >
                         Undo Last
                     </button> */}
diff --git a/src/components/setting/Signature/Signature.tsx b/src/components/setting/Signature/Signature.tsx
index 9748ab9..4f1e467 100644
--- a/src/components/setting/Signature/Signature.tsx
+++ b/src/components/setting/Signature/Signature.tsx
@@ -57,7 +57,7 @@ const SignatureManager: React.FC = () => {
     }, [])
 
     const handleEdit = (id: string) => {
-        let editSignature = signatures.find((item) => item.id === id);
+        let editSignature = signatures.find((item) => item.id == id);
 
         if (editSignature) {
             setEditingSignature(editSignature);
@@ -92,7 +92,7 @@ const SignatureManager: React.FC = () => {
     };
 
     const toggleDropdown = (id: string) => {
-        setActiveDropdown(activeDropdown === id ? null : id);
+        setActiveDropdown(activeDropdown == id ? null : id);
     };
 
     const handleAddNew = () => {
@@ -107,12 +107,12 @@ const SignatureManager: React.FC = () => {
 
 
     const renderSignatureText = (type, font, firstName, lastName, mode = 'name') => {
-        if (type !== 'SELECT') return null;
+        if (type != 'SELECT') return null;
 
-        const selectedFont = signatureOptions.find(opt => opt.style === font);
+        const selectedFont = signatureOptions.find(opt => opt.style == font);
         const fontClass = `${selectedFont?.style || 'print'}`;
 
-        if (mode === 'initials') {
+        if (mode == 'initials') {
             const initials = `${(firstName?.[0] ?? '')}${(lastName?.[0] ?? '')}`.toUpperCase();
             return (
                 <div className={`text-center text-[24px]`} style={{ fontFamily: selectedFont?.style }}>
@@ -190,7 +190,7 @@ const SignatureManager: React.FC = () => {
 
                                                         {/* Signature Image or Name/Initials */}
                                                         <div className="rounded-lg p-1 my-4 flex items-center justify-center">
-                                                            {signature?.signatureType !== 'SELECT' ? (
+                                                            {signature?.signatureType != 'SELECT' ? (
                                                                 <img
                                                                     src={`data:${signature?.signatureMimeType};base64,${signature?.signatureBlob}`}
                                                                     className="h-[50px] w-[250px] object-contain"
@@ -219,7 +219,7 @@ const SignatureManager: React.FC = () => {
 
                                                         {/* Signature Initials: Image or Generated Text */}
                                                         <div className="rounded-lg p-1 my-4 flex items-center justify-center">
-                                                            {signature?.signatureType !== 'SELECT' ? (
+                                                            {signature?.signatureType != 'SELECT' ? (
                                                                 <img
                                                                     src={`data:${signature.initialsMimeType};base64,${signature.initialsBlob}`}
                                                                     className="h-[50px] object-contain"
@@ -262,7 +262,7 @@ const SignatureManager: React.FC = () => {
                             </div>
 
                             {/* Empty State (if no signatures) */}
-                            {signatures.length === 0 && (
+                            {signatures.length == 0 && (
                                 <div className=" rounded-xl p-12 text-center mt-8">
                                     <div className="text-gray-400 mb-4">
                                         <FiEdit3 className="w-16 h-16 mx-auto" />
diff --git a/src/components/signature/ClientSignCon.tsx b/src/components/signature/ClientSignCon.tsx
index 82f1743..56b215c 100644
--- a/src/components/signature/ClientSignCon.tsx
+++ b/src/components/signature/ClientSignCon.tsx
@@ -237,7 +237,7 @@ const ClientSignCon: React.FC<ClientSignConProps> = ({
     const handleSubmit = async () => {
         setIsSubmitting(true);
 
-        if ((activeTab === 'DRAW' || activeTab === 'UPLOAD') &&
+        if ((activeTab == 'DRAW' || activeTab == 'UPLOAD') &&
             (!signatures.fullSignature || !signatures.initials)) {
             setIsSubmitting(false);
             return;
@@ -253,18 +253,18 @@ const ClientSignCon: React.FC<ClientSignConProps> = ({
                 initials: initials,
                 initialsBase64: signatures.initials,
                 signatureBase64: signatures.fullSignature,
-                font: activeTab === "SELECT" ? selectedSignature.id : ""
+                font: activeTab == "SELECT" ? selectedSignature.id : ""
             };
 
-            if (activeTab !== 'SELECT') {
+            if (activeTab != 'SELECT') {
                 payload.signatureBase64 = signatures.fullSignature;
                 payload.initialsBase64 = signatures.initials;
             }
 
             let res = null
-            if (activeTab === 'SAVED') {
+            if (activeTab == 'SAVED') {
                 res = await axios.get(`${import.meta.env.VITE_BASE_URI}/api/v1/sign/${recipientId}/signatures/${selectedSignature.id}`)
-            } else if (activeTab === 'SELECT') {
+            } else if (activeTab == 'SELECT') {
 
                 payload.signatureBase64 = ""
                 payload.initialsBase64 = ""
@@ -295,9 +295,9 @@ const ClientSignCon: React.FC<ClientSignConProps> = ({
                     signatureId: res.data.id ?? null,
                     saveType: res.data.signatureType ?? null,
                     save: true,
-                    signature: res.data.signatureType === "SELECT" ? payload.firstName : (res.data.signatureBlob ?? null),
-                    initial: res.data.signatureType === "SELECT" ? payload.initials : (res.data.initialsBlob ?? null),
-                    font: res.data.signatureType === "SELECT" ? selectedSignature.style : ""
+                    signature: res.data.signatureType == "SELECT" ? payload.firstName : (res.data.signatureBlob ?? null),
+                    initial: res.data.signatureType == "SELECT" ? payload.initials : (res.data.initialsBlob ?? null),
+                    font: res.data.signatureType == "SELECT" ? selectedSignature.style : ""
                 });
                 setOpenSign(false);
             }
@@ -310,14 +310,14 @@ const ClientSignCon: React.FC<ClientSignConProps> = ({
     };
 
     const renderSignatureText = (type, font, firstName, lastName, mode = 'name') => {
-        if (type !== 'SELECT') return null;
+        if (type != 'SELECT') return null;
 
-        const selectedFont = signatureOptions.find(opt => opt.style === font);
+        const selectedFont = signatureOptions.find(opt => opt.style == font);
         const fontClass = `${selectedFont?.style || 'print'}`;
         console.log("fontClass", fontClass)
 
 
-        if (mode === 'initials') {
+        if (mode == 'initials') {
             const initials = `${(firstName?.[0] ?? '')}${(lastName?.[0] ?? '')}`.toUpperCase();
             return (
                 <div className={`text-center text-[24px]`} style={{ fontFamily: selectedFont?.style }}>
@@ -385,7 +385,7 @@ const ClientSignCon: React.FC<ClientSignConProps> = ({
                                     key={opt.acronym}
                                     onClick={() => setSelectedSignature({ id: opt.acronym, style: opt.style })}
                                     className={`cursor-pointer border border-slate-200 rounded-xl p-4 text-center bg-white transition
-                            ${selectedSignature.id === opt.acronym
+                            ${selectedSignature.id == opt.acronym
                                             ? "ring-2 ring-[var(--mainPrimaryBtn)]"
                                             : "hover:shadow-md"}`}
                                 >
@@ -511,9 +511,9 @@ const ClientSignCon: React.FC<ClientSignConProps> = ({
                                 {preSaveSignatures.map((signature: Signature) => (
                                     <div
                                         key={signature?.id}
-                                        onClick={() => setSelectedSignature({ id: Number(signature?.id), style: "" })}
+                                        onClick={() => setSelectedSignature({ id: signature?.id, style: "" })}
                                         className={`cursor-pointer bg-white rounded-xl border p-4 w-full flex justify-between items-start transition-shadow duration-200 gap-3
-                                ${selectedSignature.id === Number(signature?.id) ? 'border-blue-500 shadow-lg' : 'border-gray-200'}
+                                ${selectedSignature.id == signature?.id ? 'border-blue-500 shadow-lg' : 'border-gray-200'}
                             `}
                                         style={{ minWidth: '220px' }} // each card width
                                     >
@@ -521,7 +521,7 @@ const ClientSignCon: React.FC<ClientSignConProps> = ({
                                         <div className="w-[60%] flex flex-col">
                                             <span className="text-sm font-medium text-gray-600 mb-1">Signed by:</span>
                                             <div className="w-full bg-gray-50 rounded-lg p-2 flex items-center justify-center min-h-[60px]">
-                                                {signature?.signatureType !== 'SELECT' && signature?.signatureBlob ? (
+                                                {signature?.signatureType != 'SELECT' && signature?.signatureBlob ? (
                                                     <img
                                                         src={`data:${signature?.signatureMimeType};base64,${signature?.signatureBlob}`}
                                                         className="w-full h-12 object-contain"
@@ -544,7 +544,7 @@ const ClientSignCon: React.FC<ClientSignConProps> = ({
                                         <div className="w-[40%] flex flex-col">
                                             <span className="text-sm font-medium text-gray-600 mb-1">Initials</span>
                                             <div className="bg-gray-50 rounded-lg p-1 flex items-center justify-center min-h-[40px]">
-                                                {signature?.signatureType !== 'SELECT' && signature?.initialsBlob ? (
+                                                {signature?.signatureType != 'SELECT' && signature?.initialsBlob ? (
                                                     <img
                                                         src={`data:${signature?.initialsMimeType};base64,${signature?.initialsBlob}`}
                                                         className="w-full h-10 object-contain"
@@ -627,17 +627,17 @@ const ClientSignCon: React.FC<ClientSignConProps> = ({
                                                 <button
                                                     key={item.id}
                                                     onClick={() => setActiveTab(item.id as 'SELECT' | 'DRAW' | 'UPLOAD')}
-                                                    className={`flex items-center justify-start space-x-2 px-3 py-4 text-sm font-medium transition-all duration-200 whitespace-nowrap ${activeTab === item.id
+                                                    className={`flex items-center justify-start space-x-2 px-3 py-4 text-sm font-medium transition-all duration-200 whitespace-nowrap ${activeTab == item.id
                                                         ? ' text-[var(--primary)]'
                                                         : 'text-gray-400'
                                                         }`}
                                                 >
-                                                    <span className={activeTab === item.id ? 'text-[var(--mainPrimaryBtn)]' : 'text-gray-400'}>
+                                                    <span className={activeTab == item.id ? 'text-[var(--mainPrimaryBtn)]' : 'text-gray-400'}>
                                                         {item.icon}
                                                     </span>
                                                     <span>{item.label}</span>
                                                 </button>
-                                                {activeTab === item.id && <div className='absolute bottom-[-1px] w-full h-[3px] bg-[var(--mainPrimaryBtn)]'></div>}
+                                                {activeTab == item.id && <div className='absolute bottom-[-1px] w-full h-[3px] bg-[var(--mainPrimaryBtn)]'></div>}
                                             </div>
                                         </>
                                     ))}
diff --git a/src/components/signature/Draw.tsx b/src/components/signature/Draw.tsx
index 82881dd..a48aca7 100644
--- a/src/components/signature/Draw.tsx
+++ b/src/components/signature/Draw.tsx
@@ -144,19 +144,19 @@ const Draw: React.FC<DrawProps> = ({ saved, setSaved }) => {
 
                 <div className="flex flex-col md:flex-row not-first:flex justify-center gap-4 w-full">
                     {[canvasRef1, canvasRef2].map((ref, index) => {
-                        const setIsDrawing = index === 0 ? setIsDrawing1 : setIsDrawing2;
-                        const isDrawing = index === 0 ? isDrawing1 : isDrawing2;
-                        const setHasDrawn = index === 0 ? setHasDrawn1 : setHasDrawn2;
+                        const setIsDrawing = index == 0 ? setIsDrawing1 : setIsDrawing2;
+                        const isDrawing = index == 0 ? isDrawing1 : isDrawing2;
+                        const setHasDrawn = index == 0 ? setHasDrawn1 : setHasDrawn2;
 
                         return (
                             <div key={index}>
                                 <div className='flex justify-between items-center w-full'>
-                                    <p className='text-slate-400 font-semibold pointer-events-none'>{index === 0 ? "Signature" : "Initial"}</p>
+                                    <p className='text-slate-400 font-semibold pointer-events-none'>{index == 0 ? "Signature" : "Initial"}</p>
                                     <div className='flex justify-center items-center gap-1'>
                                         <div className="flex cursor-pointer">
                                             {['black', 'blue', 'red', 'green'].map((color) => (
                                                 <div
-                                                    className={`w-4 h-4 rounded-sm shadow mr-1 flex justify-center items-center ${selectedColor === color ? 'scale-110' : 'scale-100'} transition-all`}
+                                                    className={`w-4 h-4 rounded-sm shadow mr-1 flex justify-center items-center ${selectedColor == color ? 'scale-110' : 'scale-100'} transition-all`}
                                                     key={color}
                                                     onClick={() => {
                                                         setSelectedColor(color as any);
@@ -166,7 +166,7 @@ const Draw: React.FC<DrawProps> = ({ saved, setSaved }) => {
                                                     style={{ backgroundColor: color }}
                                                 >
                                                     {/*                          */}
-                                                    {selectedColor === color && <FaCheck className='fill-white text-xs p-[1.5px]' />}
+                                                    {selectedColor == color && <FaCheck className='fill-white text-xs p-[1.5px]' />}
                                                 </div>
                                             ))}
                                         </div>
diff --git a/src/components/signature/SignUpload.tsx b/src/components/signature/SignUpload.tsx
index ff68b78..568dc98 100644
--- a/src/components/signature/SignUpload.tsx
+++ b/src/components/signature/SignUpload.tsx
@@ -20,12 +20,12 @@ const SignUpload: React.FC<SignUploadProps> = ({ saved, setSaved }) => {
     e.preventDefault();
     const file = e.dataTransfer.files[0];
     if (file && file.type.startsWith('image/')) {
-      type === 'signature' ? setSignatureFile(file) : setInitialFile(file);
+      type == 'signature' ? setSignatureFile(file) : setInitialFile(file);
     }
   };
 
   const handleClick = (type: 'signature' | 'initial') => {
-    if (type === 'signature') signatureInputRef.current?.click();
+    if (type == 'signature') signatureInputRef.current?.click();
     else initialInputRef.current?.click();
   };
 
@@ -35,7 +35,7 @@ const SignUpload: React.FC<SignUploadProps> = ({ saved, setSaved }) => {
   // ) => {
   //   const file = e.target.files?.[0];
   //   if (file && file.type.startsWith('image/')) {
-  //     type === 'signature' ? setSignatureFile(file) : setInitialFile(file);
+  //     type == 'signature' ? setSignatureFile(file) : setInitialFile(file);
   //   }
   // };
 
@@ -44,7 +44,7 @@ const SignUpload: React.FC<SignUploadProps> = ({ saved, setSaved }) => {
       const reader = new FileReader();
       reader.readAsDataURL(file);
       reader.onload = () => {
-        if (typeof reader.result === 'string') {
+        if (typeof reader.result == 'string') {
           resolve(reader.result);
         } else {
           reject(new Error('FileReader result is not a string'));
@@ -61,7 +61,7 @@ const SignUpload: React.FC<SignUploadProps> = ({ saved, setSaved }) => {
     if (file && file.type.startsWith('image/')) {
       try {
         const base64 = await toBase64(file);
-        type === 'signature' ? setSignatureFile(base64) : setInitialFile(base64);
+        type == 'signature' ? setSignatureFile(base64) : setInitialFile(base64);
       } catch (error) {
         console.error('Error converting file to base64:', error);
       }
diff --git a/src/components/signature_pad/SignatureCon.tsx b/src/components/signature_pad/SignatureCon.tsx
index 0f62b98..7a68023 100644
--- a/src/components/signature_pad/SignatureCon.tsx
+++ b/src/components/signature_pad/SignatureCon.tsx
@@ -22,7 +22,7 @@ const SignatureCon: React.FC<SignatureConProps> = ({ recipientId, openSign, setO
             },
             { headers: { "ngrok-skip-browser-warning": "69420", } })
             .then((res) => {
-                if (res.status === 200 || res.status === 201) {
+                if (res.status == 200 || res.status == 201) {
                     setSavedSignature(signatureDataUrl);
                     setOpenSign(false)
                 }
diff --git a/src/components/stamp/StampUpload.tsx b/src/components/stamp/StampUpload.tsx
index 7eb6048..bf00bc7 100644
--- a/src/components/stamp/StampUpload.tsx
+++ b/src/components/stamp/StampUpload.tsx
@@ -19,7 +19,7 @@ const StampUpload: React.FC<StampUploadType> = ({ stamp, setStamp }) => {
 
 
             reader.onload = () => {
-                if (typeof reader.result === 'string') {
+                if (typeof reader.result == 'string') {
                     setStamp((prev) => {
                         return (
                             {
@@ -40,7 +40,7 @@ const StampUpload: React.FC<StampUploadType> = ({ stamp, setStamp }) => {
         if (file && file.type.startsWith('image/')) {
             const reader = new FileReader();
             reader.onload = () => {
-                if (typeof reader.result === 'string') {
+                if (typeof reader.result == 'string') {
                     setStamp((prev) => {
                         return (
                             {
@@ -149,7 +149,7 @@ const StampUpload: React.FC<StampUploadType> = ({ stamp, setStamp }) => {
                         </button>
                     </div>
                 )}
-                {stamp.length === 0 && <input
+                {stamp.length == 0 && <input
                     ref={fileInputRef}
                     type="file"
                     accept="image/*"
diff --git a/src/components/templates/TemplateTable.tsx b/src/components/templates/TemplateTable.tsx
index 298aebc..6cfe9cc 100644
--- a/src/components/templates/TemplateTable.tsx
+++ b/src/components/templates/TemplateTable.tsx
@@ -83,7 +83,7 @@ const TemplateTable = () => {
                 templateId: item.id,
             };
             const res = await api.post(`/api/v1/accounts/${activeAccountId}/transactions`, payload);
-            navigate(`/process-step-one/${activeAccountId}/${res?.data?.id}?useTemplate=true`);
+            navigate(`/setup-transaction/${activeAccountId}/${res?.data?.id}?useTemplate=true`);
         } catch (error) {
             console.error(error);
         }
@@ -91,14 +91,14 @@ const TemplateTable = () => {
 
     const handleEditClick = (templateId: string) => {
         setShowMenu({ open: false, templateId: null });
-        navigate(`/process-step-one/${activeAccountId}/template/${templateId}`);
+        navigate(`/setup-transaction/${activeAccountId}/template/${templateId}`);
     };
 
     const handleDeleteClick = async (templateId: string) => {
         setShowMenu({ open: false, templateId: null });
         try {
             await api.delete(`/api/v1/accounts/${activeAccountId}/templates/${templateId}`);
-            setTemplates((prev) => prev.filter((temp) => temp.id !== Number(templateId)));
+            setTemplates((prev) => prev.filter((temp) => temp.id != templateId));
             setShowTemplateDeleteWarnModal({ show: false, templateId: "" });
         } catch (e) {
             console.error(e);
@@ -108,7 +108,7 @@ const TemplateTable = () => {
     return (
         <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden p-5">
             {/* Header */}
-            {location.pathname !== "/templates" && (
+            {location.pathname != "/templates" && (
                 <div className="flex justify-between items-center pb-3">
                     <h2 className="text-lg font-semibold text-gray-800">Recent Templates</h2>
                     <span
@@ -122,7 +122,7 @@ const TemplateTable = () => {
 
             {/* Table */}
             <div
-                className={`overflow-auto rounded-lg ${location.pathname === "/templates"
+                className={`overflow-auto rounded-lg ${location.pathname == "/templates"
                     ? "min-h-[70vh] max-h-[70vh]"
                     : "min-h-[30vh] max-h-[50vh]"
                     }`}
@@ -151,7 +151,7 @@ const TemplateTable = () => {
                             {templates.map((template, idx) => (
                                 <tr
                                     key={template.id}
-                                    className={`${idx % 2 !== 0 ? "bg-gray-50" : "bg-white"
+                                    className={`${idx % 2 != 0 ? "bg-gray-50" : "bg-white"
                                         } border-b border-gray-300 hover:bg-gray-100 transition`}
                                 >
                                     <td className="px-6 py-3 text-gray-800 font-medium truncate max-w-xs">
@@ -170,7 +170,7 @@ const TemplateTable = () => {
                                                 onClick={() =>
                                                     setShowMenu({
                                                         open:
-                                                            showMenu.open && showMenu.templateId === template.id ? false : true,
+                                                            showMenu.open && showMenu.templateId == template.id ? false : true,
                                                         templateId: template.id,
                                                     })
                                                 }
@@ -179,7 +179,7 @@ const TemplateTable = () => {
                                                 <PiDotsThreeOutlineVerticalFill className="text-lg" />
                                             </button>
 
-                                            {showMenu.open && showMenu.templateId === template.id && (
+                                            {showMenu.open && showMenu.templateId == template.id && (
                                                 <div className="absolute right-0 mt-2 w-40 bg-white border border-gray-200 rounded-lg shadow-lg z-20 animate-fade-in">
                                                     <button
                                                         onClick={() => handleUseClick(template)}
@@ -254,8 +254,8 @@ const TemplateTable = () => {
 
                         <button
                             onClick={() => setPage((prev) => Math.max(prev - 1, 0))}
-                            disabled={page === 0}
-                            className={`px-3 py-1 rounded border ${page === 0
+                            disabled={page == 0}
+                            className={`px-3 py-1 rounded border ${page == 0
                                 ? "bg-gray-100 text-gray-400 cursor-not-allowed"
                                 : "bg-white hover:bg-gray-50"
                                 }`}
diff --git a/src/components/templates/Templates.tsx b/src/components/templates/Templates.tsx
index aac445f..f550154 100644
--- a/src/components/templates/Templates.tsx
+++ b/src/components/templates/Templates.tsx
@@ -36,7 +36,7 @@ const Templates = () => {
       await dispatch(resetRecipients())
       await dispatch(resetDocuments())
       const res = await api.post(`/api/v1/accounts/${activeAccountId}/templates`);
-      navigate(`/process-step-one/${activeAccountId}/template/${res.data.id}`)
+      navigate(`/setup-transaction/${activeAccountId}/template/${res.data.id}`)
     } catch (error) {
       console.log(error)
     }
@@ -59,7 +59,7 @@ const Templates = () => {
               key={filter}
               onClick={() => setActiveFilter(filter)}
               className={`px-3 py-1 rounded-full text-xs border transition
-          ${activeFilter === filter
+          ${activeFilter == filter
                   ? "bg-[var(--primary)] text-white"
                   : "border-gray-300 text-gray-600 hover:bg-gray-100"
                 }`}
diff --git a/src/components/transactions/AuditModal.tsx b/src/components/transactions/AuditModal.tsx
index fb5aa73..2d92ca1 100644
--- a/src/components/transactions/AuditModal.tsx
+++ b/src/components/transactions/AuditModal.tsx
@@ -51,7 +51,7 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
         try {
             let res = await api.get(`/api/v1/accounts/${accountId}/transactions/${transactionId}/audit/events?lang=${userDetails.language || ''}`)
             // let res = await api.get(`/api/v1/accounts/${accountId}/transactions/${transactionId}/audit?lang=hi`)
-            if (res?.status === 200) {
+            if (res?.status == 200) {
                 // console.log(res?.data?.events)
                 let auditResponse = res?.data?.events
                 setAuditStatus(auditResponse)
@@ -154,9 +154,9 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
     };
 
     const getActionColor = (action: string, status: string) => {
-        if (status === 'COMPLETED') return 'text-green-600';
-        if (status === 'FAILED' || status === 'REJECTED') return 'text-red-600';
-        if (status === 'PENDING') return 'text-yellow-600';
+        if (status == 'COMPLETED') return 'text-green-600';
+        if (status == 'FAILED' || status == 'REJECTED') return 'text-red-600';
+        if (status == 'PENDING') return 'text-yellow-600';
 
         const colors = {
             'SENT': 'text-blue-600',
@@ -296,7 +296,7 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
                 {/* Footer */}
                 <div className="flex justify-between items-center p-3 border-t border-gray-200 bg-gray-50 text-sm">
                     <div className="text-gray-600">
-                        Showing {auditStatus.length} event{auditStatus.length !== 1 ? 's' : ''}
+                        Showing {auditStatus.length} event{auditStatus.length != 1 ? 's' : ''}
                     </div>
                     <button
                         onClick={closeModal}
diff --git a/src/components/transactions/TransactionView.tsx b/src/components/transactions/TransactionView.tsx
index 895e324..a4ad4d2 100644
--- a/src/components/transactions/TransactionView.tsx
+++ b/src/components/transactions/TransactionView.tsx
@@ -97,7 +97,7 @@ const TransactionView = () => {
     const fetchDocuments = async () => {
         try {
             const res = await api.get(`/api/v1/accounts/${accountId}/transactions/${transactionId}/documents`)
-            if (res?.status === 200) {
+            if (res?.status == 200) {
                 let resDoc = res?.data
                 setDocumentsData(resDoc)
             }
@@ -162,7 +162,7 @@ const TransactionView = () => {
                                     More
                                 </button>
 
-                                {transactionDetails.transaction.status === "CREATED" && <Link className='cursor-pointer border  text-green-700 border-gray-300 rounded-sm px-4 py-1 hover:bg-gray-100 font-bold' to={`/process-step-one/${accountId}/${transactionId}`}>
+                                {transactionDetails.transaction.status == "CREATED" && <Link className='cursor-pointer border  text-green-700 border-gray-300 rounded-sm px-4 py-1 hover:bg-gray-100 font-bold' to={`/setup-transaction/${accountId}/${transactionId}`}>
                                     Edit
                                 </Link>}
 
@@ -212,14 +212,14 @@ const TransactionView = () => {
                                                 </div>
 
                                                 {/* Right section: status and actions */}
-                                                {recipient.type.toLowerCase() !== "cc" && <div className="flex flex-col items-start sm:items-end gap-1 text-sm text-slate-600">
+                                                {recipient.type.toLowerCase() != "cc" && <div className="flex flex-col items-start sm:items-end gap-1 text-sm text-slate-600">
                                                     <div className="flex flex-wrap gap-3 items-center relative">
                                                         <div className="pl-6 relative">
                                                             <AiFillSignature className="absolute left-0 top-0 text-[1rem]" />
                                                             <p className={`text-black text-xs font-semibold rounded-lg px-2 py-0.5 ${getStatusBadge(recipient.status)}`}>{recipient.status}</p>
                                                         </div>
 
-                                                        {transactionDetails.transaction.status === "SENT" && recipient.email === user.email && recipient.status === "PENDING" && (
+                                                        {transactionDetails.transaction.status == "SENT" && recipient.email == user.email && recipient.status == "PENDING" && (
                                                             <button
                                                                 onClick={() => handleNavigateToSign(recipient.id)}
                                                                 className="text-white rounded-sm bg-[var(--primary)] px-3 py-1 font-semibold text-xs hover:bg-opacity-90 transition cursor-pointer"
@@ -229,7 +229,7 @@ const TransactionView = () => {
                                                         )}
                                                     </div>
 
-                                                    {recipient.status !== "PENDING" && (
+                                                    {recipient.status != "PENDING" && (
                                                         <p className="text-xs text-gray-500">on {recipient.completedAt}</p>
                                                     )}
                                                     {/* Optional signed document link */}
@@ -249,13 +249,13 @@ const TransactionView = () => {
                             }
 
 
-                            {transactionDetails?.transaction?.subject !== "" &&
+                            {transactionDetails?.transaction?.subject != "" &&
                                 <div>
                                     <h2 className='text-lg mt-4 font-semibold text-gray-800 cursor-pointer'>Subject</h2>
                                     <p className='mt-2 text-slate-600'>{`${transactionDetails?.transaction?.subject ? transactionDetails?.transaction?.subject : "Not Found"} `}</p>
                                 </div>}
 
-                            {transactionDetails?.transaction?.message !== "" &&
+                            {transactionDetails?.transaction?.message != "" &&
                                 <div>
                                     <h2 className='text-lg mt-4 font-semibold text-gray-800 cursor-pointer'>Message</h2>
                                     <p className='mt-2 text-slate-600'>{`${transactionDetails?.transaction?.message ? transactionDetails?.transaction?.message : "Not Found"} `}</p>
diff --git a/src/components/transactions/Transactions.tsx b/src/components/transactions/Transactions.tsx
index be39813..87b9d67 100644
--- a/src/components/transactions/Transactions.tsx
+++ b/src/components/transactions/Transactions.tsx
@@ -44,7 +44,7 @@ const Transactions = () => {
 
     useEffect(() => {
         api.get<TransactionResponse>(
-            `api/transaction?transactionStatus=${filterParam === "all" ? "" : filterParam?.toUpperCase()}`
+            `api/transaction?transactionStatus=${filterParam == "all" ? "" : filterParam?.toUpperCase()}`
         )
             .then(res => setTransactionData(res.data.content))
             .catch(err => console.error(err));
diff --git a/src/components/view/DocView.tsx b/src/components/view/DocView.tsx
index caaf0dd..4f69fc3 100644
--- a/src/components/view/DocView.tsx
+++ b/src/components/view/DocView.tsx
@@ -52,7 +52,7 @@ const DocView = () => {
 
     useEffect(() => {
         let indx = fitObj[selFitIndx].value
-        if (indx === "FIT") {
+        if (indx == "FIT") {
             indx = "100";
         } 
         zoom(Number(indx), 'zoom-con')
@@ -108,7 +108,7 @@ const DocView = () => {
 
                                         className='flex items-center justify-between w-full'>
                                         <p className='whitespace-nowrap overflow-hidden text-ellipsis max-w-[12ch]'>{val.label}</p>
-                                        {selFitIndx === indx && <FaCheck className='text-sm text-slate-400' />}
+                                        {selFitIndx == indx && <FaCheck className='text-sm text-slate-400' />}
                                     </div>
                                 </div>)
                             })
diff --git a/src/config/api.tsx b/src/config/api.tsx
index 35b5564..45aa6b7 100644
--- a/src/config/api.tsx
+++ b/src/config/api.tsx
@@ -46,20 +46,20 @@ let isRefreshing = false;
 // Response interceptor
 api.interceptors.response.use(
   response => {
-    if (window.location.pathname === "/login" || window.location.pathname === "/register") {
+    if (window.location.pathname == "/login" || window.location.pathname == "/register") {
       window.location.href = "/";
     }
     
-    if (response && (response.status === 301 || response.status === 302)) {
+    if (response && (response.status == 301 || response.status == 302)) {
       const redirectUrl = response.headers["location"];
       if (redirectUrl) {
         window.location.href = redirectUrl;
       }
     }
 
-    if (typeof response.data === 'string' && response.data.toLowerCase().includes('<!doctype html>')) {
+    if (typeof response.data == 'string' && response.data.toLowerCase().includes('<!doctype html>')) {
       // Likely a full HTML page, handle accordinglys 
-      if("responseURL" in response.request && response.request.responseURL !== null && response.request.responseURL !== "" && response.request.responseURL !== undefined) {
+      if("responseURL" in response.request && response.request.responseURL != null && response.request.responseURL != "" && response.request.responseURL != undefined) {
         window.location.href = response.request.responseURL;
       }
     }
@@ -74,7 +74,7 @@ api.interceptors.response.use(
 
     // 🔹 Handle 301/302 manually
 
-    if (error && (error.status === 301 || error.status === 302)) {
+    if (error && (error.status == 301 || error.status == 302)) {
       const redirectUrl = error.headers["location"];
       if (redirectUrl) {
         window.location.href = redirectUrl;
@@ -82,18 +82,18 @@ api.interceptors.response.use(
     }
 
     // Prevent multiple refresh attempts
-    // if (error.response?.status === 401 || error.response?.status === 500) {
-    if (error.response?.status === 401 && error.response?.status === 502 && !originalRequest._retry) {
+    // if (error.response?.status == 401 || error.response?.status == 500) {
+    if ((error.response?.status == 401 || error.response?.status == 502) && !originalRequest._retry) {
       originalRequest._retry = true;
       try {
         if (!isRefreshing) {
           isRefreshing = true;
           // Attempt to refresh the token
           const refreshResponse = await api.patch("/api/v1/auth/refresh");
-          if (refreshResponse.status === 200) {
+          if (refreshResponse.status == 200) {
             isRefreshing = false;
             // Retry the original request
-            if (window.location.pathname === "/login" || window.location.pathname === "/register") {
+            if (window.location.pathname == "/login" || window.location.pathname == "/register") {
               window.location.href = "/"; // Redirect to login page
             }
             return api(originalRequest);
@@ -101,7 +101,7 @@ api.interceptors.response.use(
         }
       } catch (refreshError) {
         console.error("Refresh token failed:", refreshError);
-        if (window.location.pathname !== "/login" && window.location.pathname !== "/register") {
+        if (window.location.pathname != "/login" && window.location.pathname != "/register") {
           window.location.href = "/login"; // Redirect to login page
         }
       }
diff --git a/src/config/axiosInstance.tsx b/src/config/axiosInstance.tsx
index afd724d..1cbe958 100644
--- a/src/config/axiosInstance.tsx
+++ b/src/config/axiosInstance.tsx
@@ -18,16 +18,16 @@ axiosInstance.interceptors.response.use(
     (response) => {
 
 
-        if (response && (response.status === 301 || response.status === 302)) {
+        if (response && (response.status == 301 || response.status == 302)) {
             const redirectUrl = response.headers["location"];
             if (redirectUrl) {
                 window.location.href = redirectUrl;
             }
         }
 
-        if (typeof response.data === 'string' && response.data.toLowerCase().includes('<!doctype html>')) {
+        if (typeof response.data == 'string' && response.data.toLowerCase().includes('<!doctype html>')) {
             // Likely a full HTML page, handle accordingly
-            if ("responseURL" in response.request && response.request.responseURL !== null && response.request.responseURL !== "" && response.request.responseURL !== undefined) {
+            if ("responseURL" in response.request && response.request.responseURL != null && response.request.responseURL != "" && response.request.responseURL != undefined) {
                 window.location.href = response.request.responseURL;
             }
         }
@@ -37,7 +37,7 @@ axiosInstance.interceptors.response.use(
     },
     (error) => {
         // Optionally handle backend 302 or 3xx here (if returned as error)
-        if (error.response?.status === 302 && error.response?.headers?.location) {
+        if (error.response?.status == 302 && error.response?.headers?.location) {
             window.location.replace(error.response.headers.location);
             return Promise.reject({ redirected: true });
         }
diff --git a/src/store/slices/documentSlice.ts b/src/store/slices/documentSlice.ts
index e05dce2..58eec66 100644
--- a/src/store/slices/documentSlice.ts
+++ b/src/store/slices/documentSlice.ts
@@ -70,8 +70,8 @@ export const fetchDocuments = createAsyncThunk<
 
       const data = response.data as Document[];
 
-      if (data.length === 0 && window.location.pathname.includes('/process-step-two')) {
-        window.location.href = window.location.href.replace("process-step-two", "process-step-one") // ✅ navigate using window
+      if (data.length == 0 && window.location.pathname.includes('/review-and-tag')) {
+        window.location.href = window.location.href.replace("review-and-tag", "setup-transaction") // ✅ navigate using window
       }
 
       return data;
@@ -108,7 +108,7 @@ export const uploadDocuments = createAsyncThunk<
         const currentFile = formData.getAll("file")[i] as File;
 
         // ---- Client-side validation ----
-        if (currentFile.type !== "application/pdf") {
+        if (currentFile.type != "application/pdf") {
           response.push({
             error: true,
             docName: currentFile.name,
@@ -141,9 +141,9 @@ export const uploadDocuments = createAsyncThunk<
           );
           response.push(res.data);
         } catch (e: unknown) {
-          if (e instanceof AxiosError && (e.response?.status === 415)) {
+          if (e instanceof AxiosError && (e.response?.status == 415)) {
             response.push({ error: true, docName: (formData.getAll("file")[i] as File).name, reason: DocumentErrorEnum.UNSUPPORTED_DOC_TYPE });
-          } else if (e instanceof AxiosError && (e.response?.status === 413)) {
+          } else if (e instanceof AxiosError && (e.response?.status == 413)) {
             response.push({ error: true, docName: (formData.getAll("file")[i] as File).name, reason: DocumentErrorEnum.FILE_SIZE_EXCEEDED });
           }
         }
@@ -190,7 +190,7 @@ export const handleMultipleTransactionThunk = createAsyncThunk<
         dispatch(showLoader('Uploading documents...'));
 
         // ---- Client-side validation ----
-        if (currentFile.type !== "application/pdf") {
+        if (currentFile.type != "application/pdf") {
           response.push({
             error: true,
             docName: currentFile.name,
@@ -223,9 +223,9 @@ export const handleMultipleTransactionThunk = createAsyncThunk<
           );
           response.push(res.data);
         } catch (e: unknown) {
-          if (e instanceof AxiosError && (e.response?.status === 415)) {
+          if (e instanceof AxiosError && (e.response?.status == 415)) {
             response.push({ error: true, docName: (formData.getAll("file")[i] as File).name, reason: DocumentErrorEnum.UNSUPPORTED_DOC_TYPE });
-          } else if (e instanceof AxiosError && (e.response?.status === 413)) {
+          } else if (e instanceof AxiosError && (e.response?.status == 413)) {
             response.push({ error: true, docName: (formData.getAll("file")[i] as File).name, reason: DocumentErrorEnum.FILE_SIZE_EXCEEDED });
           }
         }
@@ -255,8 +255,8 @@ const documentsSlice = createSlice({
       state.error = initialState.error;
     },
     setDocProgComplete: (state, action: PayloadAction<string>) => {
-      const docIndex = state.documents.findIndex(doc => doc.id === action.payload);
-      if (docIndex !== -1) {
+      const docIndex = state.documents.findIndex(doc => doc.id == action.payload);
+      if (docIndex != -1) {
         state.documents[docIndex].isCompleted = true;
       }
     },
@@ -264,7 +264,7 @@ const documentsSlice = createSlice({
       state.documents = [];
     },
     deleteDocument: (state, action: PayloadAction<string>) => {
-      state.documents = state.documents.filter(doc => doc.id !== action.payload);
+      state.documents = state.documents.filter(doc => doc.id != action.payload);
     },
   },
   extraReducers: (builder) => {
diff --git a/src/store/slices/droppedItemsSlice.tsx b/src/store/slices/droppedItemsSlice.tsx
index dc01f4e..b50269b 100644
--- a/src/store/slices/droppedItemsSlice.tsx
+++ b/src/store/slices/droppedItemsSlice.tsx
@@ -68,8 +68,8 @@ const droppedItemsSlice = createSlice({
       const key = `${documentIndex}_${pageNumber}`;
 
       if (state.droppedItems[key]) {
-        const index = state.droppedItems[key].findIndex(item => item.label === label);
-        if (index !== -1) {
+        const index = state.droppedItems[key].findIndex(item => item.label == label);
+        if (index != -1) {
           state.droppedItems[key][index] = action.payload; // Replace the existing item
         }
       }
@@ -81,7 +81,7 @@ const droppedItemsSlice = createSlice({
       const key = `${documentIndex}_${pageNumber}`;
 
       if (state.droppedItems[key]) {
-        state.droppedItems[key] = state.droppedItems[key].filter(item => item.label !== label);
+        state.droppedItems[key] = state.droppedItems[key].filter(item => item.label != label);
       }
     },
 
diff --git a/src/store/slices/selectedDocsSlice.ts b/src/store/slices/selectedDocsSlice.ts
index 1075d1d..67b5ca5 100644
--- a/src/store/slices/selectedDocsSlice.ts
+++ b/src/store/slices/selectedDocsSlice.ts
@@ -78,7 +78,7 @@ const selectedDocumentsSlice = createSlice({
       for (const document of action.payload) {
         const docId = document.documentId;
         for (const [index, selDoc] of state.selectedDocuments.entries()) {
-          if (selDoc.id === docId) {
+          if (selDoc.id == docId) {
             state.selectedDocuments[index].pages = document.pages;
             break;
           }
diff --git a/src/store/slices/selectedRecipientsSlice.tsx b/src/store/slices/selectedRecipientsSlice.tsx
index 35647e7..3565c5f 100644
--- a/src/store/slices/selectedRecipientsSlice.tsx
+++ b/src/store/slices/selectedRecipientsSlice.tsx
@@ -70,7 +70,7 @@ export const addRecipientAsync = createAsyncThunk<
             const state = getState() as { selectedRecipients: SelectedRecipientInt };
             const toggle = state.selectedRecipients.transactionTemplateToggle;
 
-            const updateRecipientsData = recipientsData.filter(recipient => recipient.id !== null);
+            const updateRecipientsData = recipientsData.filter(recipient => recipient.id != null);
             const createRecipientsData = recipientsData.filter(recipient => recipient.id == null);
 
             const basePath = `/api/v1/accounts/${accountId}/${toggle}/${transactionId}/recipients`;
@@ -133,11 +133,11 @@ export const fetchRecipients = createAsyncThunk<
             let data = response.data as Recipient[];
 
             // data = data.filter((recipient, indx) => {
-            //     return recipient.type !== "CC";
+            //     return recipient.type != "CC";
             // })
 
-            // if (data.length === 0 && window.location.pathname.includes('/process-step-two')) {
-            //     window.location.href = window.location.href.replace("process-step-two", "process-step-one") // ✅ navigate using window
+            // if (data.length == 0 && window.location.pathname.includes('/review-and-tag')) {
+            //     window.location.href = window.location.href.replace("review-and-tag", "setup-transaction") // ✅ navigate using window
             // }
 
             return data as Recipient[];
@@ -152,7 +152,7 @@ const selectedRecipientsSlice = createSlice({
     initialState,
     reducers: {
         addRecipient: (state, action: PayloadAction<Recipient>) => {
-            if (action.payload.type === recipientType.INPERSONSIGNER) {
+            if (action.payload.type == recipientType.INPERSONSIGNER) {
                 state.signingOrder = true;
                 state.recipients = [action.payload, ...state.recipients];
             } else {
@@ -167,8 +167,8 @@ const selectedRecipientsSlice = createSlice({
         },
         setSelectedRecipients: (state, action: PayloadAction<Recipient[]>) => {
             for (const [index, recipient] of action.payload.entries()) {
-                if ((recipient.type === recipientType.INPERSONSIGNER && index > 0)
-                    && action.payload[index - 1].type !== recipientType.INPERSONSIGNER) {
+                if ((recipient.type == recipientType.INPERSONSIGNER && index > 0)
+                    && action.payload[index - 1].type != recipientType.INPERSONSIGNER) {
                     return state;
                 }
             }
@@ -177,7 +177,7 @@ const selectedRecipientsSlice = createSlice({
         },
         setSigningOrder: (state, action: PayloadAction<boolean>) => {
             for (const recipient of state.recipients) {
-                if (recipient.type === recipientType.INPERSONSIGNER) {
+                if (recipient.type == recipientType.INPERSONSIGNER) {
                     if (state.signingOrder) return state;
                     state.signingOrder = true;
                     return state;
@@ -187,7 +187,7 @@ const selectedRecipientsSlice = createSlice({
             state.signingOrder = action.payload;
         },
         removeSelectedRecipient: (state, action: PayloadAction<Recipient>) => {
-            state.recipients = state.recipients.filter((recipient) => recipient.uuid !== action.payload.uuid);
+            state.recipients = state.recipients.filter((recipient) => recipient.uuid != action.payload.uuid);
         },
         removeAllRecipients: (state) => {
             state.recipients = [];
@@ -200,7 +200,7 @@ const selectedRecipientsSlice = createSlice({
         },
         updateRecipientOrder: (state, action: PayloadAction<{ id: string; routingOrder: number }>) => {
             const { id, routingOrder } = action.payload;
-            const recipient = state.recipients.find((r) => r.id === id || r.uuid === id);
+            const recipient = state.recipients.find((r) => r.id == id || r.uuid == id);
             if (recipient) {
                 recipient.routingOrder = routingOrder;
             }
@@ -230,17 +230,17 @@ const selectedRecipientsSlice = createSlice({
 
             // First try matching by id
             let index = state.recipients.findIndex(
-                r => String(r.id) === payloadUuid
+                r => String(r.id) == payloadUuid
             );
 
             // If not found, try matching by uuid
-            if (index === -1) {
+            if (index == -1) {
                 index = state.recipients.findIndex(
-                    r => String(r.uuid) === payloadUuid
+                    r => String(r.uuid) == payloadUuid
                 );
             }
 
-            if (index !== -1) {
+            if (index != -1) {
                 // Merge existing recipient with new values
                 state.recipients[index] = {
                     ...state.recipients[index],
@@ -292,7 +292,7 @@ const selectedRecipientsSlice = createSlice({
             .addCase(removeRecipientAsync.pending, () => { })
             .addCase(removeRecipientAsync.fulfilled, (state, action: PayloadAction<string | number>) => {
                 state.recipients = state.recipients.filter(
-                    (recipient) => recipient.id !== action.payload && recipient.email !== action.payload
+                    (recipient) => recipient.id != action.payload && recipient.email != action.payload
                 );
             })
             .addCase(removeRecipientAsync.rejected, (state, action) => {
diff --git a/src/store/store.ts b/src/store/store.ts
index c5caeef..2672f4c 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -47,7 +47,7 @@
 
 // export const store = configureStore({
 //   reducer: persistedReducer,
-//   devTools: import.meta.env.VITE_NODE_ENV !== "production" || true,
+//   devTools: import.meta.env.VITE_NODE_ENV != "production" || true,
 //   middleware: (getDefaultMiddleware) =>
 //     getDefaultMiddleware({
 //       serializableCheck: false,
@@ -87,7 +87,7 @@ const rootReducer = combineReducers({
 
 export const store = configureStore({
   reducer: rootReducer,
-  devTools: import.meta.env.VITE_NODE_ENV !== "production" || true,
+  devTools: import.meta.env.VITE_NODE_ENV != "production" || true,
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({
       serializableCheck: false,
diff --git a/src/utlity/JoyRideTour.tsx b/src/utlity/JoyRideTour.tsx
index 68c42c5..2fa3b16 100644
--- a/src/utlity/JoyRideTour.tsx
+++ b/src/utlity/JoyRideTour.tsx
@@ -14,7 +14,7 @@ const JoyrideController = () => {
     const tryStartTour = () => {
       let currentSteps: Step[] = [];
 
-      if (location.pathname === "/") {
+      if (location.pathname == "/") {
         currentSteps = [
           {
             target: "body", // This makes the welcome step show in center of screen
@@ -64,7 +64,7 @@ const JoyrideController = () => {
             disableBeacon: true,
           },
         ];
-      } else if (location.pathname.includes("/process-step-one")) {
+      } else if (location.pathname.includes("/setup-transaction")) {
         currentSteps = [
           {
             target: "body", // This makes the welcome step show in center of screen
@@ -101,7 +101,7 @@ const JoyrideController = () => {
 
           },
         ];
-      } else if (location.pathname.includes("/process-step-two")) {
+      } else if (location.pathname.includes("/review-and-tag")) {
         currentSteps = [
           {
             target: "body", // This makes the welcome step show in center of screen
@@ -168,7 +168,7 @@ const JoyrideController = () => {
       }
 
       const allTargetsExist = currentSteps.every((step) =>
-        step.target === "body" ? true : document.querySelector(step.target)
+        step.target == "body" ? true : document.querySelector(step.target)
       );
 
       if (allTargetsExist) {
diff --git a/src/utlity/downloadDocumentsUtils.ts b/src/utlity/downloadDocumentsUtils.ts
index 1b57185..7497bfa 100644
--- a/src/utlity/downloadDocumentsUtils.ts
+++ b/src/utlity/downloadDocumentsUtils.ts
@@ -4,7 +4,7 @@ import api from "../config/api";
 const downloadDocumentUtils = async (accountId: string, transactionId: string, type: string, includeCertificate: string | null = null) => {
     let documentId = type;
     let url = `/api/v1/accounts/${accountId}/transactions/${transactionId}/documents/${documentId}`;
-    if (includeCertificate !== null) {
+    if (includeCertificate != null) {
         url = url + includeCertificate;
     }
     try {
diff --git a/src/utlity/maskUtils.ts b/src/utlity/maskUtils.ts
index 704a766..b78b81f 100644
--- a/src/utlity/maskUtils.ts
+++ b/src/utlity/maskUtils.ts
@@ -10,12 +10,12 @@ const type_last_four = (str: string, changeWith: string): string => {
 };
 
 const type_credit_card = (str: string, changeWith: string): string => {
-    if (str.length !== 15 && str.length !== 16) return str;
+    if (str.length != 15 && str.length != 16) return str;
 
     const last4 = str.slice(-4);
     const masked = str.slice(0, -4).replace(/\d/g, changeWith);
 
-    if (str.length === 16) {
+    if (str.length == 16) {
         // Format: XXXX XXXX XXXX 1234
         return masked.slice(0, 4) + " " + masked.slice(4, 8) + " " + masked.slice(8, 12) + " " + last4;
     } else {
@@ -34,7 +34,7 @@ const type_national_insurance = (str: string, changeWith: string): string => {
 const type_social_security = (str: string, changeWith: string): string => {
     // Expecting 9-digit string like "123456789"
     const cleaned = str.replace(/\D/g, ""); // remove non-digit characters
-    if (cleaned.length !== 9) return str;
+    if (cleaned.length != 9) return str;
 
     const part3 = cleaned.slice(5);
     return `${changeWith.repeat(3)}-${changeWith.repeat(2)}-${part3}`;
@@ -42,7 +42,7 @@ const type_social_security = (str: string, changeWith: string): string => {
 
 const type_social_insurance = (str: string, changeWith: string): string => {
     const cleaned = str.replace(/\D/g, "");
-    if (cleaned.length !== 9) return str;
+    if (cleaned.length != 9) return str;
 
     const part3 = cleaned.slice(6);
     return `${changeWith.repeat(3)} ${changeWith.repeat(3)} ${part3}`;
diff --git a/src/utlity/tagGroupConUtils.ts b/src/utlity/tagGroupConUtils.ts
index c47ef85..86c7bbc 100644
--- a/src/utlity/tagGroupConUtils.ts
+++ b/src/utlity/tagGroupConUtils.ts
@@ -23,11 +23,11 @@ const getGroupDimension = (
         dimension.maxLeft = Math.max(dimension.maxLeft ?? 0, rect.right);
     });
 
-    dimension.maxTop = dimension.maxTop !== null ? dimension.maxTop - containerRect.top + (offsetY - 10) : null;
-    dimension.minTop = dimension.minTop !== null ? dimension.minTop - containerRect.top - (offsetY - 10) : null;
+    dimension.maxTop = dimension.maxTop != null ? dimension.maxTop - containerRect.top + (offsetY - 10) : null;
+    dimension.minTop = dimension.minTop != null ? dimension.minTop - containerRect.top - (offsetY - 10) : null;
 
-    dimension.maxLeft = dimension.maxLeft !== null ? dimension.maxLeft - containerRect.left + (offsetX - 10) : null;
-    dimension.minLeft = dimension.minLeft !== null ? dimension.minLeft - containerRect.left - (offsetX - 10) : null;
+    dimension.maxLeft = dimension.maxLeft != null ? dimension.maxLeft - containerRect.left + (offsetX - 10) : null;
+    dimension.minLeft = dimension.minLeft != null ? dimension.minLeft - containerRect.left - (offsetX - 10) : null;
 
     return dimension;
 }
@@ -40,28 +40,28 @@ const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, conta
     const borderBottom: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='bottom']");
     const borderLeft: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='left']");
 
-    if (borderTop !== null && dimension.maxLeft !== null && dimension.minLeft !== null) {
+    if (borderTop != null && dimension.maxLeft != null && dimension.minLeft != null) {
         borderTop.style.width = (dimension.maxLeft - dimension.minLeft) + "px";
         borderTop.style.height = "1px";
         borderTop.style.top = dimension.minTop + "px";
         borderTop.style.left = dimension.minLeft + "px";
     }
 
-    if (borderRight !== null && dimension.maxTop !== null && dimension.minTop !== null) {
+    if (borderRight != null && dimension.maxTop != null && dimension.minTop != null) {
         borderRight.style.width = "1px";
         borderRight.style.height = (dimension.maxTop - dimension.minTop) + "px";
         borderRight.style.top = dimension.minTop + "px";
         borderRight.style.left = dimension.maxLeft + "px";
     }
 
-    if (borderBottom !== null && dimension.maxLeft !== null && dimension.minLeft !== null) {
+    if (borderBottom != null && dimension.maxLeft != null && dimension.minLeft != null) {
         borderBottom.style.width = (dimension.maxLeft - dimension.minLeft) + "px";
         borderBottom.style.height = "1px";
         borderBottom.style.top = dimension.maxTop + "px";
         borderBottom.style.left = dimension.minLeft + "px";
     }
 
-    if (borderLeft !== null && dimension.maxTop !== null && dimension.minTop !== null) {
+    if (borderLeft != null && dimension.maxTop != null && dimension.minTop != null) {
         borderLeft.style.width = "1px";
         borderLeft.style.height = (dimension.maxTop - dimension.minTop) + "px";
         borderLeft.style.top = dimension.minTop + "px";