diff --git a/.env b/.env
index 2b5b434..a0b511c 100644
--- a/.env
+++ b/.env
@@ -1,7 +1,8 @@
+VITE_BASE_URI="https://glider-precious-similarly.ngrok-free.app"
 # VITE_BASE_URI="https://wired-terminally-muskrat.ngrok-free.app"
 # VITE_BASE_URI="https://officially-powerful-goat.ngrok-free.app"
 # VITE_BASE_URI="https://python-amused-adder.ngrok-free.app"
-VITE_BASE_URI="https://concrete-gladly-mullet.ngrok-free.app"
+# VITE_BASE_URI="https://concrete-gladly-mullet.ngrok-free.app"
 
 
 # VITE_BASE_URI="http://192.168.2.176:8083"
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 3c842d6..8112863 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,9 @@
       "name": "sme-web",
       "version": "0.0.0",
       "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/modifiers": "^9.0.0",
+        "@dnd-kit/sortable": "^10.0.0",
         "@mdx-js/react": "^3.1.0",
         "@react-oauth/google": "^0.12.1",
         "@reduxjs/toolkit": "^2.5.1",
@@ -355,6 +358,103 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/accessibility/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/@dnd-kit/modifiers": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/modifiers/-/modifiers-9.0.0.tgz",
+      "integrity": "sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/modifiers/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
+      "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.5.tgz",
diff --git a/package.json b/package.json
index 020c2a9..7ccbdcd 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
     "@mdx-js/react": "^3.1.0",
     "@react-oauth/google": "^0.12.1",
     "@reduxjs/toolkit": "^2.5.1",
diff --git a/public/completion-bg.png b/public/completion-bg.png
new file mode 100644
index 0000000..b6d273d
Binary files /dev/null and b/public/completion-bg.png differ
diff --git a/public/completion-screen-1.png b/public/completion-screen-1.png
new file mode 100644
index 0000000..382e58d
Binary files /dev/null and b/public/completion-screen-1.png differ
diff --git a/public/completion-screen-2.png b/public/completion-screen-2.png
new file mode 100644
index 0000000..0978ec1
Binary files /dev/null and b/public/completion-screen-2.png differ
diff --git a/public/completion-screen-frame-1.png b/public/completion-screen-frame-1.png
new file mode 100644
index 0000000..5cea8d6
Binary files /dev/null and b/public/completion-screen-frame-1.png differ
diff --git a/public/docs-made-easy.png b/public/docs-made-easy.png
new file mode 100644
index 0000000..c6f6a3a
Binary files /dev/null and b/public/docs-made-easy.png differ
diff --git a/public/forms-made-easy.png b/public/forms-made-easy.png
new file mode 100644
index 0000000..59545a1
Binary files /dev/null and b/public/forms-made-easy.png differ
diff --git a/public/sme-white.png b/public/sme-white.png
new file mode 100644
index 0000000..22265eb
Binary files /dev/null and b/public/sme-white.png differ
diff --git a/src/App.tsx b/src/App.tsx
index 37da9ac..38d1023 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -23,6 +23,7 @@ import DocumentCompletionScreen from "./components/process/CompletionScreen/Docu
 import JoyrideController from "./utlity/JoyRideTour";
 import Contacts from "./components/contacts/Contacts";
 import TransactionSentSuccess from "./components/process/CompletionScreen/TransactionSentSuccess";
+import CompletionScreen from "./components/client/CompletionScreen";
 const App = () => {
 
   return (
@@ -97,6 +98,10 @@ const App = () => {
             </ProtectedRoute>
           } />
 
+          <Route path="/completion" element={
+              <CompletionScreen />
+          } />
+
           {/* Links work wothout Login */}
           <Route path="/login" element={<Login />} />
           <Route path="/register" element={<Register />} />
diff --git a/src/components/CommonNav.tsx b/src/components/CommonNav.tsx
index 41f0b44..d11c800 100644
--- a/src/components/CommonNav.tsx
+++ b/src/components/CommonNav.tsx
@@ -5,6 +5,7 @@ import api from '../config/api';
 import { IoSettings, IoSettingsOutline } from 'react-icons/io5';
 import { useSelector } from 'react-redux';
 import { RootState } from '../store/store';
+import { GoBell } from 'react-icons/go';
 
 interface AccountNavProps {
   accountName?: string | null;
@@ -86,10 +87,10 @@ 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])
+    initialN = initialN + "" + (userDetailsAsync.lastName && userDetailsAsync.lastName[0])
     setInitial(initialN)
   }, [userDetailsAsync])
 
@@ -335,7 +336,7 @@ 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 ? (
-            <span className="text-gray-900 font-semibold">Home</span>
+            <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);
@@ -363,6 +364,36 @@ const CommonNav: React.FC<AccountNavProps> = ({
       </div>
 
       <div className="flex items-center space-x-2">
+
+           {/* SETINGS - START */}
+        <div 
+        onClick={handleSettingsClick}
+        className="bg-[#F6F6F6] rounded-md py-1.5 px-2 cursor-pointer transition-all duration-200 hover:bg-[#DCDADA] mr-3">
+          <svg width="16" height="20" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g opacity="0.54">
+              <path d="M2 9.10996V14.88C2 17 2 17 4 18.35L9.5 21.53C10.33 22.01 11.68 22.01 12.5 21.53L18 18.35C20 17 20 17 20 14.89V9.10996C20 6.99996 20 6.99996 18 5.64996L12.5 2.46996C11.68 1.98996 10.33 1.98996 9.5 2.46996L4 5.64996C2 6.99996 2 6.99996 2 9.10996Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+              <path d="M11 15C12.6569 15 14 13.6569 14 12C14 10.3431 12.6569 9 11 9C9.34315 9 8 10.3431 8 12C8 13.6569 9.34315 15 11 15Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            </g>
+          </svg>
+        </div>
+        {/* SETINGS - END */}
+
+        {/* Bell START */}
+        <div className="bg-[#F6F6F6] rounded-md py-1.5 px-2 cursor-pointer transition-all duration-200 hover:bg-[#DCDADA]">
+          <svg width="14" height="20" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.7493 8.74963C16.3353 8.74963 15.9993 8.41363 15.9993 7.99963C15.9993 4.92988 13.6087 2.30563 10.5562 2.02513C7.49653 1.7435 4.6574 3.88475 4.0994 6.9005C4.03265 7.25975 3.9989 7.6295 3.9989 7.99963C3.9989 8.41363 3.6629 8.74963 3.2489 8.74963C2.8349 8.74963 2.4989 8.41363 2.4989 7.99963C2.4989 7.538 2.5409 7.07638 2.62415 6.6275C3.32165 2.85763 6.8639 0.177876 10.6938 0.531126C14.5102 0.882126 17.4993 4.16263 17.4993 7.99963C17.4993 8.414 17.1637 8.74963 16.7493 8.74963Z" fill="#757575" />
+            <path d="M16.7493 17.7496C16.3353 17.7496 15.9993 17.4136 15.9993 16.9996C15.9993 16.5856 16.3353 16.2496 16.7493 16.2496C17.4873 16.2496 17.9433 15.7445 18.1237 15.2716C18.3033 14.8014 18.2996 14.1234 17.7495 13.6314C17.4408 13.3554 17.4138 12.881 17.6906 12.5724C17.9662 12.2637 18.441 12.2371 18.7492 12.5135C19.6702 13.337 19.9747 14.63 19.5247 15.8067C19.074 16.9869 17.9846 17.7496 16.7493 17.7496Z" fill="#757575" />
+            <path d="M16.7493 10.4686C16.3353 10.4686 15.9993 10.1326 15.9993 9.71863V8C15.9993 7.586 16.3353 7.25 16.7493 7.25C17.1633 7.25 17.4993 7.586 17.4993 8V9.71863C17.4993 10.1326 17.1637 10.4686 16.7493 10.4686Z" fill="#757575" />
+            <path d="M18.249 13.8226C18.0708 13.8226 17.8923 13.7596 17.7495 13.6318C16.6372 12.6369 15.9993 11.2108 15.9993 9.71863C15.9993 9.30463 16.3353 8.96863 16.7493 8.96863C17.1633 8.96863 17.4993 9.30463 17.4993 9.71863C17.4993 10.7844 17.955 11.8033 18.7492 12.5139C19.0578 12.7899 19.0848 13.2643 18.8081 13.5729C18.6603 13.7383 18.4552 13.8226 18.249 13.8226Z" fill="#757575" />
+            <path d="M3.24927 10.4686C2.83527 10.4686 2.49927 10.1326 2.49927 9.71863V8C2.49927 7.586 2.83527 7.25 3.24927 7.25C3.66327 7.25 3.99927 7.586 3.99927 8V9.71863C3.99927 10.1326 3.66364 10.4686 3.24927 10.4686Z" fill="#757575" />
+            <path d="M1.74974 13.8226C1.54349 13.8226 1.33837 13.7382 1.19062 13.5725C0.914245 13.2639 0.94087 12.7895 1.24949 12.5135C2.04374 11.8029 2.49937 10.7844 2.49937 9.71825C2.49937 9.30425 2.83537 8.96825 3.24937 8.96825C3.66337 8.96825 3.99937 9.30425 3.99937 9.71825C3.99937 11.2104 3.36149 12.6365 2.24924 13.6314C2.10637 13.7596 1.92787 13.8226 1.74974 13.8226Z" fill="#757575" />
+            <path d="M9.99933 21.4996C7.55995 21.4996 5.49933 19.439 5.49933 16.9996C5.49933 16.5856 5.83533 16.2496 6.24933 16.2496C6.66333 16.2496 6.99933 16.5856 6.99933 16.9996C6.99933 18.6256 8.37295 19.9996 9.99933 19.9996C11.6257 19.9996 12.9993 18.6256 12.9993 16.9996C12.9993 16.5856 13.3353 16.2496 13.7493 16.2496C14.1633 16.2496 14.4993 16.5856 14.4993 16.9996C14.4993 19.439 12.4387 21.4996 9.99933 21.4996Z" fill="#757575" />
+            <path d="M3.24931 17.7496C2.01406 17.7496 0.925435 16.9888 0.47581 15.8113C0.02506 14.6315 0.32881 13.337 1.24944 12.5139C1.55844 12.2379 2.03244 12.2641 2.30844 12.5731C2.58444 12.8821 2.55781 13.3558 2.24919 13.6321C1.69944 14.1238 1.69644 14.804 1.87681 15.2765C2.05644 15.7471 2.51169 16.2504 3.24931 16.2504C3.66331 16.2504 3.99931 16.5864 3.99931 17.0004C3.99931 17.4144 3.66369 17.7496 3.24931 17.7496Z" fill="#757575" />
+            <path d="M16.7493 17.7496H3.24927C2.83527 17.7496 2.49927 17.4136 2.49927 16.9996C2.49927 16.5856 2.83527 16.2496 3.24927 16.2496H16.7493C17.1633 16.2496 17.4993 16.5856 17.4993 16.9996C17.4993 17.4136 17.1636 17.7496 16.7493 17.7496Z" fill="#757575" />
+          </svg>
+        </div>
+        {/* Bell END */}
+
         <div className="relative" ref={dropdownRef}>
           <button
             id='user-details-avatar'
@@ -371,7 +402,7 @@ const CommonNav: React.FC<AccountNavProps> = ({
             aria-expanded={open}
             aria-haspopup="true"
           >
-            <div className="w-8 h-8 rounded-full overflow-hidden bg-gradient-to-br from-[var(--primary)] to-blue-600 flex items-center justify-center text-white font-semibold text-sm shadow-md">
+            <div className="w-8 h-8 rounded-md overflow-hidden bg-gradient-to-br from-[var(--primary)] to-blue-600 flex items-center justify-center text-white font-semibold text-sm shadow-md">
               {user ? (
                 <span className="w-full h-full object-cover p-1.5 font-bold">
                   {initial}
diff --git a/src/components/accounts/Account.tsx b/src/components/accounts/Account.tsx
index 01dbe47..7ddfe5d 100644
--- a/src/components/accounts/Account.tsx
+++ b/src/components/accounts/Account.tsx
@@ -8,6 +8,7 @@ import Cards from "../home/Cards";
 import AddInviteModal from "./AddInviteModal";
 import { Bounce, toast } from "react-toastify";
 import { FiFileText, FiClock, FiAlertTriangle, FiCheckCircle } from "react-icons/fi";
+import { CgSandClock } from "react-icons/cg";
 import TransactionDataTable from "./TransactionDataTable";
 import { useSelector } from "react-redux";
 import { RootState } from "../../store/store";
@@ -45,7 +46,7 @@ const Account = () => {
             {
                 title: "Expiring Soon",
                 count: data.expiring || 0,
-                icon: <FiAlertTriangle className="w-5 h-5 text-red-500" />,
+                icon: <CgSandClock className="w-5 h-5 text-red-500" />,
                 iconBg: "bg-red-100 border-red-200",
                 textColor: "text-red-600",
                 gradient: "bg-white",
@@ -60,47 +61,6 @@ const Account = () => {
                 gradient: "bg-white",
                 shadowColor: "shadow-green-100",
             },
-            // {
-            //     title: 'Waiting for Others',
-            //     count: data.waitingForOthers || 0,
-            //     icon: <FaClock size={18} className="text-stone-600" />,
-            //     gradient: 'bg-gradient-to-br from-blue-50 to-blue-100',
-            //     shadowColor: 'shadow-blue-200/50',
-            //     iconBg: 'bg-blue-100 border-blue-200',
-            //     textColor: 'text-blue-700',
-            //     trend: 'down'
-            // },
-            // {
-            //     title: 'declined',
-            //     count: data.declined || 0,
-            //     icon: <FaClock size={18} className="text-purple-600" />,
-            //     gradient: 'bg-gradient-to-br from-purple-50 to-purple-100',
-            //     shadowColor: 'shadow-purple-200/50',
-            //     iconBg: 'bg-purple-100 border-purple-200',
-            //     textColor: 'text-purple-700',
-            //     trend: 'down'
-            // },
-            // {
-            //     title: 'cancelled',
-            //     count: data.cancelled || 0,
-            //     icon: <FaClock size={18} className="text-green-600" />,
-            //     gradient: 'bg-gradient-to-br from-green-50 to-green-100',
-            //     shadowColor: 'shadow-green-200/50',
-            //     iconBg: 'bg-green-100 border-green-200',
-            //     textColor: 'text-green-700',
-            //     trend: 'down'
-            // },
-            // {
-            //     title: 'draft',
-            //     count: data.draft || 0,
-            //     icon: <FaClock size={18} className="text-stone-600" />,
-            //     gradient: 'bg-gradient-to-br from-stone-50 to-stone-100',
-            //     shadowColor: 'shadow-stone-200/50',
-            //     iconBg: 'bg-stone-100 border-stone-200',
-            //     textColor: 'text-stone-700',
-            //     trend: 'down'
-            // }
-            // Add more cards here if needed
         ];
     };
 
@@ -247,8 +207,9 @@ const Account = () => {
 
             <Cards type="transactions" onOpenModal={handleOpenModal} cards={cards}
                 isLoading={isLoading} />
-            <section className="my-4 mx-3">
-                <TransactionDataTable activeAccountId={activeAccountId}/>
+            <section className="my-4 mx-3 px-4">
+                <div className="h-[10px]"></div>
+                <TransactionDataTable activeAccountId={activeAccountId} />
             </section>
 
             {isModalOpen && <AddInviteModal onClose={() => setIsModalOpen(false)} onInvite={handleInvite} inviteLoading={inviteLoading}
diff --git a/src/components/accounts/Accounts.tsx b/src/components/accounts/Accounts.tsx
index 768aa8d..a9f2a3b 100644
--- a/src/components/accounts/Accounts.tsx
+++ b/src/components/accounts/Accounts.tsx
@@ -112,7 +112,6 @@ const Accounts = () => {
 
   return (
     <>
-      {/* <Cards type="account" onOpenModal={handleOpenModal} /> */}
       {allAccounts.length > 0 && (
         <div className="overflow-x-auto py-2">
           <table className="min-w-full text-sm border border-gray-200 rounded bg-white shadow-sm">
diff --git a/src/components/accounts/TransactionDataTable.tsx b/src/components/accounts/TransactionDataTable.tsx
index 3f8d2af..2c4f83d 100644
--- a/src/components/accounts/TransactionDataTable.tsx
+++ b/src/components/accounts/TransactionDataTable.tsx
@@ -3,12 +3,11 @@ import { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi';
 import api from '../../config/api';
 import { Transaction } from '../transactions/Transactions';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { FaCheck } from 'react-icons/fa';
 import LoaderUi from '../../helper/LoaderUi';
 import logoRecord from '../../assets/record.svg';
-
-
-
+import { MdOutlineFileDownload } from 'react-icons/md';
+import downloadDocumentUtils from '../../utlity/downloadDocumentsUtils';
+import { IoMdClose } from 'react-icons/io';
 
 const formatDate = (timestamp: number) => {
     return new Date(timestamp * 1000).toLocaleString();
@@ -22,14 +21,30 @@ const statusColorMap = {
 };
 
 
-const TransactionDataTable = ({activeAccountId}) => {
+const TransactionDataTable = ({ activeAccountId }) => {
     const navigate = useNavigate()
     const loaction = useLocation()
 
     const [currentEmailId, setCurrentEmailId] = useState<string | null>('null');
     const [selectedTransactions, setSelectedTransactions] = useState<number[]>([]);
+
+    const [showMenu, setShowMenu] = useState<{ open: boolean, transactionId: string | null }>({
+        open: false,
+        transactionId: null
+    });
     const [loading, setLoading] = useState(false)
 
+    enum DownloadTypesEnum {
+        ALL = "archived",
+        COMBINED = "combined",
+        CERTIFICATE = "certificate"
+    }
+
+    const [downloadDocumentType, setDownloadDocumentType] = useState({
+        type: DownloadTypesEnum.ALL,
+        includeCertificate: false
+    })
+
     const fetchTransactions = async () => {
         console.log("fetchTransactions")
         setLoading(true)
@@ -81,36 +96,41 @@ const TransactionDataTable = ({activeAccountId}) => {
         return statusColorMap[status] || "bg-gray-100 text-gray-600";
     }
 
+    function handleDownloadFormSubmit(e) {
+        e.preventDefault();
+        
+        const formData = new FormData(e.target);
+        const docType = formData.get('download-doc-type');
+        const includeCertificate = formData.get('download-doc-type-include-cert');
+
+        downloadDocumentUtils(activeAccountId, showMenu.transactionId as string, docType as string, includeCertificate as string | null)
+    }
+
 
 
     return (
         <>
 
-            <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+            <div className={`bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden px-5 pb-5`}>
                 {/* Header */}
-                {location.pathname !== '/transactions' && 
-                <div className="flex justify-between items-center px-6 py-4 border-b border-gray-100">
-                    <h2 className="text-sm font-semibold text-gray-800">Recent Transactions</h2>
-                    <span className=' text-[var(--primary)] text-xs hover:underline cursor-pointer font-semibold'>View all</span>
-                </div>}
+                {location.pathname !== '/transactions' &&
+                    <div className="flex justify-between items-center pt-4">
+                        <h2 className="text-lg font-bold text-gray-800">Recent Transactions</h2>
+                        <span className=' text-[var(--primary)] text-xs hover:underline cursor-pointer font-semibold'>View all</span>
+                    </div>}
 
                 {/* Scrollable Table Container */}
-                <div className={`overflow-auto  no-scrollbar ${location.pathname === '/transactions' ? "min-h-[76vh] max-h-[76vh]" : "min-h-[70vh] max-h-[70vh]"}`}>
+                <div className={`overflow-auto my-4 no-scrollbar ${location.pathname === '/transactions' ? "min-h-[76vh] max-h-[76vh]" : "min-h-[30vh] max-h-[46vh]"}`}>
                     <table className="w-full text-sm">
                         {/* Sticky Header */}
-                        <thead className="bg-gray-50 sticky top-0 z-10">
-                            <tr className="text-gray-600 text-xs uppercase tracking-wider border-b border-gray-200">
-                                <th className="px-6 py-4 text-left font-semibold">Document</th>
-                                <th className="px-6 py-4 text-center font-semibold">Status</th>
-                                {location.pathname === '/transactions' && (
-                                    <>
-                                        <th className="px-6 py-4 text-center font-semibold">Signed By</th>
-                                        <th className="px-6 py-4 text-center font-semibold">Last Change</th>
-                                        <th className="px-6 py-4 text-center font-semibold">Expire After (Days)</th>
-                                        <th className="px-6 py-4 text-center font-semibold">Actions</th>
-                                    </>
-                                )}
-
+                        <thead className="sticky top-0 z-10">
+                            <tr className="text-xs">
+                                <th className="text-left bg-[#F8F9FC] rounded-tl-lg rounded-bl-lg px-6 py-4 font-bold text-nowrap">Transaction</th>
+                                <th className="text-left bg-[#F8F9FC] px-6 py-4 font-bold text-nowrap">Status</th>
+                                <th className="text-left bg-[#F8F9FC] px-6 py-4 font-bold text-nowrap">Signed By</th>
+                                <th className="text-left bg-[#F8F9FC] px-6 py-4 font-bold text-nowrap">Last Change</th>
+                                <th className="text-left bg-[#F8F9FC] px-6 py-4 font-bold text-nowrap">Expire After (Days)</th>
+                                <th className="text-left bg-[#F8F9FC] rounded-tr-lg rounded-br-lg px-6 py-4 font-bold text-nowrap">Actions</th>
                             </tr>
                         </thead>
                         {loading ? (
@@ -124,19 +144,20 @@ const TransactionDataTable = ({activeAccountId}) => {
                         ) : transactions.length > 0 ? (
                             <>
                                 {/* Scrollable Body */}
-                                <tbody className="bg-white divide-y divide-gray-100">
-                                    {transactions.map((tx) => (
+                                <tbody>
+                                    {transactions.map((tx, idx) => (
                                         <tr
                                             key={tx.id}
-                                            onClick={() => handleTransactionClick(tx.id)}
-                                            className="hover:bg-gray-50 transition-colors duration-150 cursor-pointer"
+                                            // onClick={() => handleTransactionClick(tx.id)}
                                         >
-                                            <td className="px-6 py-4 text-left">
-                                                <div className="text-gray-800 font-medium truncate max-w-xs">
+                                            <td className={`${idx % 2 !== 0 ? "bg-[#F8F9FC]" : ""} font-bold px-6 py-4 text-left`}>
+                                                <div className="text-gray-800 font-medium truncate max-w-xs cursor-pointer"
+                                                    onClick={() => handleTransactionClick(tx.id)}
+                                                >
                                                     {tx?.subject || "Untitled"}
                                                 </div>
                                             </td>
-                                            <td className="px-6 py-4 text-center">
+                                            <td className={`${idx % 2 !== 0 ? "bg-[#F8F9FC]" : ""} text-left font-bold px-6 py-4`}>
                                                 <span
                                                     className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${getStatusColorClass(
                                                         tx.status
@@ -146,50 +167,94 @@ const TransactionDataTable = ({activeAccountId}) => {
                                                 </span>
                                             </td>
 
-                                            {location.pathname === '/transactions' && (
-                                                <>
-                                                    <td className="px-6 py-4">
-                                                        <div className="flex items-center justify-center">
-                                                            {tx.signedBy ? (
-                                                                <div className="flex items-center gap-2">
-                                                                    <div
-                                                                        className="w-7 h-7 rounded-full flex items-center justify-center text-xs font-medium text-white flex-shrink-0"
-                                                                        style={{ backgroundColor: "#d8b4fe" }}
-                                                                    >
-                                                                        {tx.signedByInitials}
-                                                                    </div>
-                                                                    <span className="text-gray-700 truncate max-w-[120px]">
-                                                                        {tx.signedBy}
-                                                                    </span>
-                                                                </div>
-                                                            ) : (
-                                                                <span className="text-gray-400">-</span>
-                                                            )}
+
+
+                                            <td className={`${idx % 2 !== 0 ? "bg-[#F8F9FC]" : ""} text-left font-bold px-6 py-4`}>
+                                                <div className="flex items-center justify-left">
+                                                    {tx.signedBy ? (
+                                                        <div className="flex items-center gap-2">
+                                                            <div
+                                                                className="w-7 h-7 rounded-full flex items-center justify-center text-xs font-medium text-white flex-shrink-0"
+                                                                style={{ backgroundColor: "#d8b4fe" }}
+                                                            >
+                                                                {tx.signedByInitials}
+                                                            </div>
+                                                            <span className="text-gray-700 truncate max-w-[120px]">
+                                                                {tx.signedBy}
+                                                            </span>
                                                         </div>
-                                                    </td>
-                                                    <td className="px-6 py-4 text-center">
-                                                        <span className="text-gray-600 whitespace-nowrap">
-                                                            {formatTimestamp(tx.lastModifiedAt)}
-                                                        </span>
-                                                    </td>
-                                                    <td className="px-6 py-4 text-center">
-                                                        <span className="text-gray-700">
-                                                            {tx.expireAfter ?? "-"}
-                                                        </span>
-                                                    </td>
-                                                    <td className="px-6 py-4 text-center">
-                                                        <button
-                                                            className="text-gray-400 hover:text-gray-600 transition-colors duration-150 p-1 rounded-md hover:bg-gray-100"
-                                                            onClick={(e) => {
-                                                                e.stopPropagation();
-                                                                // Handle actions menu
-                                                            }}
-                                                        >
-                                                            <PiDotsThreeOutlineVerticalFill className="text-lg" />
-                                                        </button>
-                                                    </td>
-                                                </>
-                                            )}
+                                                    ) : (
+                                                        <>
+                                                            -
+                                                        </>
+                                                    )}
+                                                </div>
+                                            </td>
+                                            <td className={`${idx % 2 !== 0 ? "bg-[#F8F9FC]" : ""} font-bold px-6 py-4 text-left`}>
+                                                <span className="text-gray-600 whitespace-nowrap">
+                                                    {formatTimestamp(tx.lastModifiedAt)}
+                                                </span>
+                                            </td>
+                                            <td className={`${idx % 2 !== 0 ? "bg-[#F8F9FC]" : ""} font-bold px-6 py-4 text-left`}>
+                                                <span className="text-gray-700">
+                                                    {tx.expireAfter ?? "-"}
+                                                </span>
+                                            </td>
+                                            <td className={`${idx % 2 !== 0 ? "bg-[#F8F9FC]" : ""} font-semibold px-6 py-4 text-left text-[var(--mainPrimaryBtn)]`}>
+
+                                                <div className='flex justify-start items-center gap-6'>
+                                                    <div className='flex gap-1 relative'
+                                                        tabIndex={0}
+                                                        // onBlur={(e) => {
+                                                        //     if (!e.currentTarget.contains(e.relatedTarget)) {
+                                                        //         setShowMenu(null);
+                                                        //     }
+                                                        // }}
+
+                                                        onClick={() =>
+                                                            setShowMenu({
+                                                                open: true,
+                                                                transactionId: tx.id
+                                                            })
+                                                        }
+                                                    >
+                                                        <MdOutlineFileDownload className='text-xl' />
+                                                        <p>
+                                                            Download
+                                                        </p>
+
+
+                                                        {/* {showMenu === idx && (
+                                                            <div className="absolute top-7.5 right-0 bg-white border border-gray-200 rounded-md shadow-lg z-20 min-w-[140px] overflow-hidden animate-fade-in">
+                                                                <button
+                                                                    onClick={() => downloadDocumentUtils(activeAccountId, tx.id, "combined")}
+                                                                    className="w-full text-left px-4 py-2 text-sm cursor-pointer text-slate-600 hover:bg-slate-50 transition-colors whitespace-nowrap"
+                                                                >
+                                                                    Download Signed
+                                                                </button>
+                                                                <button
+                                                                    className="w-full text-left px-4 py-2 text-sm cursor-pointer text-slate-600 hover:bg-slate-50 transition-colors whitespace-nowrap"
+                                                                >
+                                                                    Download Original
+                                                                </button>
+                                                            </div>
+                                                        )} */}
+
+                                                    </div>
+                                                    {/* <button
+                                                        className="duration-150 p-1 rounded-md rotate-[90deg] text-black"
+                                                        onClick={(e) => {
+                                                            e.stopPropagation();
+                                                            // Handle actions menu
+                                                        }}
+                                                    >
+                                                        <PiDotsThreeOutlineVerticalFill className="text-lg" />
+                                                    </button> */}
+                                                </div>
+
+                                            </td>
+
+
 
 
                                         </tr>
@@ -212,8 +277,70 @@ const TransactionDataTable = ({activeAccountId}) => {
                         )}
                     </table>
                 </div>
+
             </div>
 
+
+
+
+
+
+            {showMenu.open && (
+                <form onSubmit={(e) => handleDownloadFormSubmit(e)} className='fixed inset-0 z-50'>
+                    <div className='absolute inset-0 bg-black/40' onClick={() => setShowMenu({open: false, transactionId: null})}></div>
+                    <div className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[90%] max-w-md rounded-lg bg-white shadow-lg'>
+                        <div className='flex items-center justify-between px-5 py-4 border-b border-slate-200'>
+                            <p className='font-semibold text-lg'>Download Document</p>
+                            <button aria-label='Close download dialog' className='p-1 rounded hover:bg-slate-100' onClick={() => setShowMenu({open: false, transactionId: null})}>
+                                <IoMdClose className='text-xl cursor-pointer' />
+                            </button>
+                        </div>
+                        <div className='px-5 py-4'>
+                            <fieldset>
+                                <legend className='text-sm font-medium text-slate-700 mb-3'>Choose file to download</legend>
+                                <div className='space-y-2'>
+                                    <label className='cursor-pointer flex items-center gap-2'>
+                                        <input type='radio' className='cursor-pointer' name='download-doc-type' value={DownloadTypesEnum.ALL} />
+                                        <span>All</span>
+                                    </label>
+                                    <label className='cursor-pointer flex items-center gap-2'>
+                                        <input type='radio' className='cursor-pointer' name='download-doc-type' defaultChecked value={DownloadTypesEnum.COMBINED} />
+                                        <span>Combined</span>
+                                    </label>
+                                    <label className='cursor-pointer flex items-center gap-2'>
+                                        <input type='radio' className='cursor-pointer' name='download-doc-type' defaultChecked value={DownloadTypesEnum.CERTIFICATE} />
+                                        <span>Certificate</span>
+                                    </label>
+                                    {/* <label className='flex items-center gap-2'>
+                                        <select className='w-full' name="" id="" multiple>
+                                            <option value="123.pdf">123.pdf</option>
+                                            <option value="123.pdf">123.pdf</option>
+                                            <option value="123.pdf">123.pdf</option>
+                                            <option value="123.pdf">123.pdf</option>
+                                        </select>
+                                        <span>Custom</span>
+                                    </label> */}
+                                    <label className='cursor-pointer flex items-center gap-2'>
+                                        <input type='checkbox' className='cursor-pointer' name='download-doc-type-include-cert' value='?include_certificate=true' />
+                                        <span>Include Certificate</span>
+                                    </label>
+                                </div>
+                            </fieldset>
+                            <div className='flex justify-end gap-2 mt-5'>
+                                <button className='cursor-pointer px-4 py-2 rounded border border-slate-200 text-slate-700 hover:bg-slate-50' onClick={() => setShowMenu({open: false, transactionId: null})}>Cancel</button>
+                                <button className='cursor-pointer px-4 py-2 rounded bg-[var(--mainPrimaryBtn)] text-white hover:opacity-90'>Download</button>
+                            </div>
+                        </div>
+                    </div>
+                </form>
+            )}
+
+
+
+
+
+
+
         </>
     )
 }
diff --git a/src/components/client/CompletionScreen.tsx b/src/components/client/CompletionScreen.tsx
new file mode 100644
index 0000000..8beace7
--- /dev/null
+++ b/src/components/client/CompletionScreen.tsx
@@ -0,0 +1,136 @@
+import React from "react";
+import { RiFileList3Line } from "react-icons/ri";
+
+interface CompletionScreenProps {
+    hit?: string;
+    title?: string;
+    message?: string;
+    textColorSuccess?: boolean;
+}
+
+const CompletionScreen: React.FC<CompletionScreenProps> = ({
+    hit = "All Done! ",
+    title = "Thanks for signing",
+    message = "Your document is now complete and securely stored. We’ve emailed you a copy for your reference.",
+    textColorSuccess = true
+}) => {
+    return (
+        <div className="relative min-h-screen flex flex-col bg-gradient-to-b from-white to-blue-50 overflow-hidden">
+
+            <div>
+                <img className="absolute z-0 top-[5%] right-0" src="/completion-screen-frame-1.png" alt="" />
+                <img className="absolute z-0 top-[5%] left-0 rotate-y-180" src="/completion-screen-frame-1.png" alt="" />
+            </div>
+
+            {/* Header */}
+            <header className="p-4 flex justify-center sm:justify-start items-center bg-white shadow-md z-10">
+                <div className="flex items-center gap-2">
+                    <RiFileList3Line className="text-[var(--mainPrimaryBtn)] text-2xl" />
+                    <span className="text-lg font-semibold text-[var(--mainPrimaryBtn)]">
+                        Sign made easy
+                    </span>
+                </div>
+            </header>
+
+            {/* Main content */}
+            <main className="flex flex-col items-center text-center px-4 flex-grow">
+                <h1 className={`text-2xl md:text-4xl font-bold mt-6`}>
+                    <span className={`${textColorSuccess ? "text-[var(--mainPrimaryBtn)]" : "text-red-400"}`}>{hit}</span>{title}
+                </h1>
+                <p className="mt-3.5 max-w-xl">
+                    {message}
+                </p>
+
+                {/* <button className="flex items-center gap-2 mt-6 bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 transition">
+                    <FiDownload />
+                    Download
+                </button> */}
+
+                {/* <button className="mt-6 flex items-center gap-2 bg-orange-500 text-white px-6 py-2 rounded-md hover:bg-orange-600 transition">
+                    <FiZap /> Login
+                </button> */}
+                <p className="font-semibold mt-6 text-md">
+                    Access your documents anytime — just <a href="/login" className="text-white bg-[var(--mainPrimaryBtn)] px-3 py-1 rounded-sm">Login</a>
+                </p>
+
+
+                {/* Illustration placeholder */}
+                <div className="mt-14">
+                    {textColorSuccess ? <img
+                        src="/completion-screen-1.png"
+                        alt="Document completed"
+                        className="w-60 md:w-64 lg:w-80"
+                    /> :
+                        <img
+                            src="/completion-screen-2.png"
+                            alt="Document completed"
+                            className="w-60 md:w-64 lg:w-80"
+                        />}
+                </div>
+
+                {/* Apps Section */}
+                <section className="relative z-10 top-10 w-full max-w-5xl">
+                    <h2 className="text-2xl font-semibold text-gray-800 mb-6">
+                        Boost Efficiency with Our Apps
+                    </h2>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+
+                        {/* Forms Made Easy */}
+                        <div className="bg-white rounded-lg shadow p-6">
+                            <div className="">
+                                <p className="text-sm font-semibold text-left mb-3">
+                                    Generate Forms with Ease
+                                </p>
+                                <div className="w-full">
+                                    <div className="w-full flex flex-col justify-start items-start sm:flex-row sm:justify-between sm:items-center">
+                                        <img src="/forms-made-easy.png" className="w-[60%]" alt="Docs Made Easy" />
+                                        <button className="mt-4 sm:mt-0 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">
+                                            Try Now
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+
+                        {/* Docs Made Easy */}
+                        <div className="bg-white rounded-lg shadow p-6">
+                            <div className="">
+                                <p className="text-sm font-semibold text-left mb-3">
+                                    Generate Documents (Invoices, Reports, Quotes)
+                                </p>
+                                <div className="w-full">
+                                    <div className="w-full flex flex-col justify-start items-start sm:flex-row sm:justify-between sm:items-center">
+                                        <img src="/docs-made-easy.png" className="w-[60%]" alt="Docs Made Easy" />
+                                        <button className="mt-4 sm:mt-0 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">
+                                            Try Now
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+
+                    </div>
+                </section>
+            </main>
+
+            {/* Footer */}
+            <footer className="text-center text-sm py-6 bg-white mt-[80px] ">
+                <p className="px-4 font-semibold">
+                    Copyright 2025 Sign Made Easy. All Rights Reserved.{" "}
+                    <a href="#" className="text-[var(--mainPrimaryBtn)] hover:underline">
+                        Privacy Policy
+                    </a>{" "}
+                    |{" "}
+                    <a href="#" className="text-[var(--mainPrimaryBtn)] hover:underline">
+                        Reasonable Use Policy
+                    </a>
+                </p>
+            </footer>
+        </div>
+    );
+}
+
+
+export default CompletionScreen;
\ No newline at end of file
diff --git a/src/components/client/ConsentScreen.tsx b/src/components/client/ConsentScreen.tsx
index c5d3db3..5628ba0 100644
--- a/src/components/client/ConsentScreen.tsx
+++ b/src/components/client/ConsentScreen.tsx
@@ -14,8 +14,8 @@ export default function ConsentScreen({ onConsent, onDecline }: ConsentScreenPro
 
     return (
         <>
-            <div className="absolute top-0 left-0 w-[100vw] h-[100vh] bg-slate-100 opacity-50 backdrop-filter backdrop-blur-2xl"></div>
-            <div className="absolute top-0 left-0 w-full h-screen flex items-center justify-center p-6">
+            <div className="absolute top-0 left-0 w-[100vw] h-[100vh] bg-slate-100 opacity-50 backdrop-filter backdrop-blur-2xl z-50"></div>
+            <div className="absolute top-0 left-0 w-full h-screen flex items-center justify-center p-6 z-50">
                 <div className="bg-white shadow-xl rounded-2xl p-8 max-w-lg w-full border border-gray-200">
                     {/* Header */}
                     <div className="flex items-center gap-3 mb-6">
diff --git a/src/components/client/DeclineModal.tsx b/src/components/client/DeclineModal.tsx
index bd0def1..ea925fa 100644
--- a/src/components/client/DeclineModal.tsx
+++ b/src/components/client/DeclineModal.tsx
@@ -1,14 +1,35 @@
+import { useState } from "react";
 import { FaTimesCircle } from "react-icons/fa";
 
 interface DeclineModalProps {
   open: boolean;
   onClose: () => void;
-  onConfirm: () => void;
+  onConfirm: (data: { reason: string; comments: string }) => void;
 }
 
-export default function DeclineModal({ open, onClose, onConfirm }: DeclineModalProps) {
+const REASONS = [
+  "Incorrect recipient",
+  "Wrong or missing information",
+  "Not intended for me",
+  "I don’t agree with the terms",
+  "Other",
+];
+
+export default function DeclineModal({
+  open,
+  onClose,
+  onConfirm,
+}: DeclineModalProps) {
+  const [reason, setReason] = useState("Other");
+  const [comments, setComments] = useState("");
+
   if (!open) return null;
 
+  const handleConfirm = () => {
+    onConfirm({ reason, comments });
+    onClose();
+  };
+
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
       <div className="bg-white rounded-lg shadow-lg w-full max-w-md p-6 relative">
@@ -21,10 +42,48 @@ export default function DeclineModal({ open, onClose, onConfirm }: DeclineModalP
         </div>
 
         {/* Message */}
-        <p className="text-sm text-gray-600 mb-6">
+        <p className="text-sm text-gray-600 mb-4">
           Are you sure you want to decline this document? This action cannot be undone.
         </p>
 
+        {/* Reasons (Radio buttons) */}
+        <div className="mb-4">
+          <p className="text-sm font-medium text-gray-700 mb-2">
+            Please select a reason:
+          </p>
+          <div className="space-y-2">
+            {REASONS.map((r) => (
+              <label key={r} className="flex items-center gap-2 text-sm">
+                <input
+                  type="radio"
+                  name="declineReason"
+                  value={r}
+                  checked={reason === r}
+                  onChange={() => setReason(r)}
+                  className="h-4 w-4 text-red-500 border-gray-300 focus:ring-red-500"
+                />
+                {r}
+              </label>
+            ))}
+          </div>
+        </div>
+
+        {/* Comments (only for Other) */}
+        {reason === "Other" && (
+          <div className="mb-6">
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Additional Comments
+            </label>
+            <textarea
+              value={comments}
+              onChange={(e) => setComments(e.target.value)}
+              placeholder="Please provide more details..."
+              rows={3}
+              className="w-full border rounded-md p-2 text-sm focus:ring-red-500 focus:border-red-500"
+            />
+          </div>
+        )}
+
         {/* Buttons */}
         <div className="flex justify-end gap-3">
           <button
@@ -34,10 +93,7 @@ export default function DeclineModal({ open, onClose, onConfirm }: DeclineModalP
             Cancel
           </button>
           <button
-            onClick={() => {
-              onConfirm();
-              onClose();
-            }}
+            onClick={handleConfirm}
             className="px-4 py-2 rounded-md bg-red-500 text-white hover:bg-red-600"
           >
             Decline
diff --git a/src/components/client/DocumentPages.tsx b/src/components/client/DocumentPages.tsx
index ea4cf05..c0cd58f 100644
--- a/src/components/client/DocumentPages.tsx
+++ b/src/components/client/DocumentPages.tsx
@@ -16,11 +16,12 @@ const DocumentPages = ({ selectedDocuments, setDropDownTogglePage, dropDownToggl
     return (
         <div className='p-4'>
 
-            <div className="flex flex-col gap-2">
+            <div className="flex flex-col gap-2 pb-[6rem]">
                 {selectedDocuments && selectedDocuments.length && selectedDocuments.map((document, indx) => {
                    return (
                         <div
                             key={indx}
+
                         // tabIndex={1}
                         // onBlur={() => setDropDownTogglePage('')}
                         >
@@ -34,7 +35,7 @@ const DocumentPages = ({ selectedDocuments, setDropDownTogglePage, dropDownToggl
                                     document.pages != undefined && <img
                                         key={indx}
                                         className='rounded-sm shadow'
-                                        src={"data:image/png;base64," + document.thumbnail}
+                                        src={document.pages[0].src}
                                         alt="" />
                                 }
 
diff --git a/src/components/client/ReassignModal.tsx b/src/components/client/ReassignModal.tsx
index 46dda30..a48be6d 100644
--- a/src/components/client/ReassignModal.tsx
+++ b/src/components/client/ReassignModal.tsx
@@ -4,13 +4,14 @@ import { FaUserEdit } from "react-icons/fa";
 interface ReassignModalProps {
   open: boolean;
   onClose: () => void;
-  onConfirm: (data: { firstName: string; lastName: string; email: string }) => void;
+  onConfirm: (data: { firstName: string; lastName: string; email: string; message: string }) => void;
 }
 
 export default function ReassignModal({ open, onClose, onConfirm }: ReassignModalProps) {
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");
   const [email, setEmail] = useState("");
+  const [message, setMessage] = useState("");
 
   const [errors, setErrors] = useState<{ lastName?: string; email?: string }>({});
 
@@ -27,7 +28,7 @@ export default function ReassignModal({ open, onClose, onConfirm }: ReassignModa
 
   const handleSubmit = () => {
     if (!validate()) return;
-    onConfirm({ firstName, lastName, email });
+    onConfirm({ firstName, lastName, email, message });
     onClose();
   };
 
@@ -85,10 +86,24 @@ export default function ReassignModal({ open, onClose, onConfirm }: ReassignModa
             />
             {errors.email && <p className="text-red-500 text-xs mt-1">{errors.email}</p>}
           </div>
+
+          {/* Message Textarea */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Message (optional)
+            </label>
+            <textarea
+              placeholder="Write a message for the recipient..."
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              rows={3}
+              className="w-full border border-slate-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 resize-none"
+            />
+          </div>
         </div>
 
         {/* Buttons */}
-        <div className="flex justify-end gap-3 mt-6">
+        <div className="flex justify-end gap-3 mt-6 flex-wrap">
           <button
             onClick={onClose}
             className="px-4 py-2 rounded-md border border-gray-300 text-gray-600 hover:bg-gray-100 text-sm"
diff --git a/src/components/client/ReassignSuccess.tsx b/src/components/client/ReassignSuccess.tsx
new file mode 100644
index 0000000..ee4afcc
--- /dev/null
+++ b/src/components/client/ReassignSuccess.tsx
@@ -0,0 +1,37 @@
+import { FaCheckCircle } from "react-icons/fa";// or replace with your button
+
+interface ReassignSuccessScreenProps {
+  reassignedTo: { firstName: string | null; lastName: string; email: string };
+  onBackHome?: () => void;
+}
+
+export default function ReassignSuccess({
+  reassignedTo,
+  onBackHome,
+}: ReassignSuccessScreenProps) {
+  return (
+    <div className="flex flex-col items-center justify-center h-screen w-full bg-slate-50 px-4">
+      <FaCheckCircle className="text-green-500 text-6xl mb-4" />
+      <h1 className="text-2xl font-semibold text-gray-800 mb-2 text-center">
+        Reassignment Complete
+      </h1>
+      <p className="text-gray-600 text-center max-w-md mb-6">
+        You have successfully reassigned the transaction to:
+      </p>
+
+      <div className="bg-white border border-gray-200 rounded-lg shadow-md p-4 w-full max-w-sm mb-8">
+        <p className="text-gray-800 font-medium text-lg">
+          {reassignedTo.firstName} {reassignedTo.lastName}
+        </p>
+        <p className="text-gray-500 text-sm">{reassignedTo.email}</p>
+      </div>
+
+      <button
+        onClick={onBackHome}
+        className="bg-[var(--primary)] text-white px-6 py-2 rounded-lg"
+      >
+        Visit SME
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/client/SignButton.tsx b/src/components/client/SignButton.tsx
index 6d9fcd3..0521246 100644
--- a/src/components/client/SignButton.tsx
+++ b/src/components/client/SignButton.tsx
@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect } from "react";
-import { FaSignature, FaDownload, FaUserEdit, FaTimesCircle } from "react-icons/fa";
+import { FaSignature, FaDownload, FaUserEdit, FaTimesCircle, FaAngleLeft, FaAngleRight } from "react-icons/fa";
 import { BsThreeDotsVertical } from "react-icons/bs";
 
 interface Props {
@@ -34,79 +34,81 @@ export default function SignButton({
   }, []);
 
   return (
-    <div className="relative inline-block" ref={menuRef}>
-      {(!transparentTags && !hideTags) ? (
-        <div className="flex items-center">
-          {/* Sign Button */}
-          <button
-            onClick={handleFormSubmit}
-            className="flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-md bg-[var(--primary)] hover:opacity-90 transition text-white outline-none"
-          >
-            <span id="sign-client-side-btn" className="tracking-wide">
-              Sign
-            </span>
-            <FaSignature className="text-md" />
-          </button>
-
-          {/* Three Dots Dropdown Trigger */}
-          <button
-            onClick={() => setMenuOpen((prev) => !prev)}
-            className="ml-2 p-2 rounded-full hover:bg-gray-100 focus:outline-none transition"
-          >
-            <BsThreeDotsVertical className="text-gray-600 text-lg cursor-pointer" />
-          </button>
-
-          {/* Dropdown Menu */}
-          {menuOpen && (
-            <div
-              tabIndex={0}
-              onBlur={() => setMenuOpen(false)} // close on blur
-              className="absolute right-0 top-10 w-56 bg-white border border-gray-200 rounded-lg shadow-lg z-10"
+    <>
+      <div className="relative inline-block" ref={menuRef}>
+        {(!transparentTags && !hideTags) ? (
+          <div className="flex items-center">
+            {/* Sign Button */}
+            {/* <button
+              onClick={handleFormSubmit}
+              className="flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-md bg-[var(--primary)] hover:opacity-90 transition text-white outline-none"
             >
-              <ul className="py-1 text-sm text-gray-700">
-                <li>
-                  <button
-                    onClick={() => {
-                      onDownloadClick?.();
-                      setMenuOpen(false);
-                    }}
-                    className="flex items-center gap-3 w-full cursor-pointer text-left px-4 py-2 hover:bg-gray-100"
-                  >
-                    <FaDownload className="text-blue-500" />
-                    <span>Download Document</span>
-                  </button>
-                </li>
-                <li>
-                  <button
-                    onClick={() => {
-                      onReassignClick?.();
-                      setMenuOpen(false);
-                    }}
-                    className="flex items-center gap-3 w-full cursor-pointer text-left px-4 py-2 hover:bg-gray-100"
-                  >
-                    <FaUserEdit className="text-yellow-500" />
-                    <span>Reassign</span>
-                  </button>
-                </li>
-                <li>
-                  <button
-                    onClick={() => {
-                      onDeclineClick?.();
-                      setMenuOpen(false);
-                    }}
-                    className="flex items-center gap-3 w-full cursor-pointer text-left px-4 py-2 hover:bg-gray-100 text-red-500 border-t border-gray-200"
-                  >
-                    <FaTimesCircle />
-                    <span>Decline</span>
-                  </button>
-                </li>
-              </ul>
-            </div>
-          )}
-        </div>
-      ) : (
-        <p className="text-xs text-green-600 font-medium">Signed Successfully</p>
-      )}
-    </div>
+              <span id="sign-client-side-btn" className="tracking-wide">
+                Sign
+              </span>
+              <FaSignature className="text-md" />
+            </button> */}
+
+            {/* Three Dots Dropdown Trigger */}
+            <button
+              onClick={() => setMenuOpen((prev) => !prev)}
+              className="py-2 rounded-full focus:outline-none transition ml-2"
+            >
+              <BsThreeDotsVertical className="text-white text-lg cursor-pointer" />
+            </button>
+
+            {/* Dropdown Menu */}
+            {menuOpen && (
+              <div
+                tabIndex={0}
+                onBlur={() => setMenuOpen(false)} // close on blur
+                className="absolute right-0 top-10 w-56 bg-white border border-gray-200 rounded-lg shadow-lg z-10"
+              >
+                <ul className="py-1 text-sm text-gray-700">
+                  <li>
+                    <button
+                      onClick={() => {
+                        onDownloadClick?.();
+                        setMenuOpen(false);
+                      }}
+                      className="flex items-center gap-3 w-full cursor-pointer text-left px-4 py-2 hover:bg-gray-100"
+                    >
+                      <FaDownload className="" />
+                      <span>Download Document</span>
+                    </button>
+                  </li>
+                  <li>
+                    <button
+                      onClick={() => {
+                        onReassignClick?.();
+                        setMenuOpen(false);
+                      }}
+                      className="flex items-center gap-3 w-full cursor-pointer text-left px-4 py-2 hover:bg-gray-100"
+                    >
+                      <FaUserEdit className="" />
+                      <span>Reassign</span>
+                    </button>
+                  </li>
+                  <li>
+                    <button
+                      onClick={() => {
+                        onDeclineClick?.();
+                        setMenuOpen(false);
+                      }}
+                      className="flex items-center gap-3 w-full cursor-pointer text-left px-4 py-2 hover:bg-gray-100 text-red-500 border-t border-gray-200"
+                    >
+                      <FaTimesCircle />
+                      <span>Decline</span>
+                    </button>
+                  </li>
+                </ul>
+              </div>
+            )}
+          </div>
+        ) : (
+          <p className="text-xs text-green-600 font-medium">Signed Successfully</p>
+        )}
+      </div>
+    </>
   );
 }
diff --git a/src/components/client/SignDocument.tsx b/src/components/client/SignDocument.tsx
index 5744d98..03bab51 100644
--- a/src/components/client/SignDocument.tsx
+++ b/src/components/client/SignDocument.tsx
@@ -11,7 +11,7 @@ import { Bounce, toast } from "react-toastify";
 import { useDispatch, useSelector } from "react-redux";
 import { hideLoader, showLoader } from "../../store/slices/loaderSlice";
 
-import { FaSignature, FaCheck, FaQuestionCircle } from 'react-icons/fa'
+import { FaSignature, FaCheck, FaQuestionCircle, FaDownload, FaAngleLeft, FaAngleRight } from 'react-icons/fa'
 import { IoIosDocument, IoMdHome } from 'react-icons/io'
 import { MdKeyboardArrowDown } from 'react-icons/md'
 import confetti from 'canvas-confetti'
@@ -30,6 +30,9 @@ import ConsentScreen from "./ConsentScreen";
 import SignButton from "./SignButton";
 import DeclineModal from "./DeclineModal";
 import ReassignModal from "./ReassignModal";
+import { ImCancelCircle } from "react-icons/im";
+import ReassignSuccess from "./ReassignSuccess";
+import CompletionScreen from "./CompletionScreen";
 
 
 
@@ -142,6 +145,7 @@ enum RightSideNav {
 }
 
 const SignDocument = () => {
+    const windowWidth = window.innerWidth;
     const { recipientId } = useParams();
     const dispatch = useDispatch();
 
@@ -314,8 +318,6 @@ const SignDocument = () => {
             })
             .then((res) => {
                 if (res.status === 200) {
-
-
                     setSelectedDocuments(res?.data?.documents)
                     setRecipient(res?.data?.details)
                     setDroppedItems(res?.data?.tagJsons)
@@ -328,13 +330,17 @@ const SignDocument = () => {
                         setProvideTags(true)
                     }
 
-                    if (res?.data?.status === "COMPLETED") {
+                    if(windowWidth > 638) {
+                        setIsFields(false)
+                    }
+
+                    if (res?.data?.status === "COMPLETED" || res?.data?.status === "DECLINED") {
                         setShowCompletionScreen(true)
                     }
 
-                    setTimeout(() => {
-                        dispatch(hideLoader());
-                    }, 600);
+                    dispatch(hideLoader());
+                    // setTimeout(() => {
+                    // }, 600);
 
                 }
 
@@ -411,22 +417,25 @@ const SignDocument = () => {
         axios.post(`${import.meta.env.VITE_BASE_URI}/api/sign?recipientId=${recipientId}`, submitData, { headers: { "ngrok-skip-browser-warning": "69420", } })
             .then((res) => {
                 if (res.status === 200) {
+                    dispatch(hideLoader());
                     setTransparentTags(true)
                     setShowConfetti(true)
+                    setShowCompletionScreen(true)
+                    setSelectedTag(null)
                 }
             })
-            .catch((err) => {
-            }
-            )
+            .catch(() => {
+            })
     };
 
 
     const handleTagNavClick = (action: "N" | "P") => {
-        if (!tagJson || !tagJson.length) return
+        // debugger
+        if (!droppedItems || !droppedItems.length) return
 
         // If FocusElement is Null Setting up 0 th Tag
         if (!focusElement) {
-            setFocusElement({ ...tagJson[0], focusElementIndx: 0 });
+            setFocusElement({ ...droppedItems[0], focusElementIndx: 0 });
             return;
         }
 
@@ -435,10 +444,10 @@ const SignDocument = () => {
         if (currFocusElemIndx === undefined) return;
         const updIndx = (action === "N") ? (currFocusElemIndx + 1) : (currFocusElemIndx - 1)
 
-        if (updIndx >= tagJson.length || updIndx < 0 || !tagJson[updIndx].id) return
+        if (updIndx >= droppedItems.length || updIndx < 0 || !droppedItems[updIndx].id) return
 
-        scrollToElement(tagJson[updIndx].id)
-        setFocusElement({ ...tagJson[updIndx], focusElementIndx: updIndx })
+        scrollToElement(droppedItems[updIndx].id)
+        setFocusElement({ ...droppedItems[updIndx], focusElementIndx: updIndx })
     }
 
     const scrollToElement = (elementId: string) => {
@@ -615,6 +624,42 @@ const SignDocument = () => {
         });
     }
 
+    const handleDeclineConfirm = async (reason: string, comments: string) => {
+        try {
+            await axios.post(`${import.meta.env.VITE_BASE_URI}/api/sign/decline?recipientId=${recipientId}`, { reason: reason + ", " + comments });
+            setSignerConsent((prev) => ({ ...prev, decline: true }));
+            setRecSignStatus("DECLINED");
+            setShowCompletionScreen(true);
+        } catch (e) { }
+    }
+
+    const handleReassignConfirm = (data: { firstName: string; lastName: string; email: string; message: string }) => {
+        axios.post(`${import.meta.env.VITE_BASE_URI}/api/sign/reassign?recipientId=${recipientId}`, {
+            name: data.firstName ? data.firstName + " " + data.lastName : data.lastName,
+            email: data.email,
+            message: data.message,
+            language: "en"
+        })
+            .then((res) => {
+                if (res.status === 202) {
+                    setShowCompletionScreen(true);
+                }
+            })
+            .catch((err) => {
+                console.log(err)
+            });
+    }
+
+    if (showCompletionScreen) {
+        if (recSignStatus === "COMPLETED") {
+            return <CompletionScreen />
+        } 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 />
+        }
+    }
+
     return (
         <div className={`w-full h-screen overflow-hidden relative ${(globalLoader.isLoading) ? 'pointer-events-none overflow-hidden' : ''}`}>
             {!showCompletionScreen && <>
@@ -624,24 +669,83 @@ const SignDocument = () => {
                 // onSubmit={(e: React.FormEvent<HTMLFormElement>) => handleFormSubmit(e)}
                 >
                     {/* Nav Two - Options - START */}
-                    <div className='flex justify-between items-center px-4 py-1 bg-white'>
+                    <div className='flex justify-between items-center px-4 py-1 bg-[var(--primary)]'>
 
                         {/* Left Side */}
                         <div className='flex justify-start items-center gap-1'>
 
-                            <div className='flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm'>
-                                <p className='tracking-wide font-semibold text-[1rem] text-[var(--primary)]'>Sign Made Easy</p>
+                            {/* <div className='flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm max-w-max'> */}
+                            {/* <p className='tracking-wide font-semibold text-[1rem] text-[var(--primary)]'> */}
+                            {/* Sign Made Easy  */}
+                            {/* </p> */}
+                            {/* </div> */}
+
+                            <img className="w-[50%] max-w-max py-1 pr-3.5" src="/sme-white.png" alt="" />
+
+                            {provideTags && recipient?.type !== "CC" && <div
+                                onClick={() => handleSetIsFields(true)}
+                                className={`flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm ${isFields ? 'bg-slate-200' : 'bg-white'}`}>
+                                <IoIosDocument />
+                                <p className='tracking-wide'>Fields</p>
+                            </div>}
+
+                            <div>
+                                <p
+                                    onClick={() => handleSetIsFields(provideTags ? false : !isFields)}
+                                    className={` flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm ${!isFields ? 'bg-slate-200' : 'bg-white'} ${!provideTags ? "sm:hidden" : ""}`}>
+                                    <IoIosDocument />
+                                    <span className='tracking-wide'>Pages</span>
+                                </p>
                             </div>
 
+                            {/* <p className="hidden sm:block text-xs text-white">Hi! {recipient && recipient.firstName} {recipient && recipient.lastName}</p> */}
+                        </div>
+
+
+
+                        {/* Right Side - STARTS */}
+                        <div className='flex justify-center items-center'>
+
+                            {/* Documnt Nav */}
+                            <>
+                                {selectedDocuments !== null &&
+                                    <div
+                                        className=""
+                                        tabIndex={1}
+                                        onBlur={() => setNav2DocToggle(false)}>
+                                        <div onClick={() => setNav2DocToggle(!nav2DocToggle)} className='bg-white flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm'>
+                                            <p className='tracking-wide flex gap-1'><span>{selectedDocuments && selectedDocuments.length}</span> <span>Documents</span></p>
+                                            <MdKeyboardArrowDown className={`${nav2DocToggle ? 'rotate-180' : ''} transition-all`} />
+                                        </div>
+
+
+                                        <div
+                                            className={`absolute max-w-max shadow rounded-md mt-1 px-2 py-1 z-20 bg-white ${nav2DocToggle ? '' : 'hidden'}`}>
+                                            {selectedDocuments.length && selectedDocuments.map((document, indx) => {
+                                                return (<div key={indx} className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-default'>
+                                                    <div className='flex items-center gap-1'>
+                                                        {/* <p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p> */}
+                                                        <IoIosDocument className='text-slate-600 text-lg' />
+                                                        <p className='whitespace-nowrap overflow-hidden text-ellipsis max-w-[15ch]'>{document.name}</p>
+                                                    </div>
+                                                </div>)
+                                            })}
+                                        </div>
+
+
+                                    </div>
+                                }
+                            </>
 
                             {/* FIT - START */}
                             <div
+                                className="hidden sm:block"
                                 tabIndex={1}
                                 onBlur={() => setIsFitDd(false)}
                             >
                                 <div
                                     onClick={() => setIsFitDd(!isFitDd)}
-                                    className='flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm'>
+                                    className='bg-white flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm ml-2'>
                                     <p className='tracking-wide'>Fit</p>
                                     <MdKeyboardArrowDown style={{ transform: `${isFitDd ? "rotate(180deg)" : ""}` }} />
                                 </div>
@@ -665,59 +769,6 @@ const SignDocument = () => {
                             </div>
                             {/* FIT - END */}
 
-                            {provideTags && <div
-                                onClick={() => handleSetIsFields(true)}
-                                className={`flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm ${isFields ? 'bg-slate-100' : ''}`}>
-                                <IoIosDocument />
-                                <p className='tracking-wide'>Fields</p>
-                            </div>}
-
-                            <div
-                                onClick={() => handleSetIsFields(provideTags ? false : !isFields)}
-                                className={`flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm ${!isFields ? 'bg-slate-100' : ''}`}>
-                                <IoIosDocument />
-                                <p className='tracking-wide'>Pages</p>
-                            </div>
-
-                        </div>
-
-
-                        <p className="text-xs text-slate-600">Hi! {recipient && recipient.firstName} {recipient && recipient.lastName}</p>
-
-
-
-                        {/* Right Side - STARTS */}
-                        <div className='flex justify-center items-center'>
-
-                            {/* Documnt Nav */}
-                            <>
-                                {selectedDocuments !== null &&
-                                    <div tabIndex={1}
-                                        onBlur={() => setNav2DocToggle(false)}>
-                                        <div onClick={() => setNav2DocToggle(!nav2DocToggle)} className='flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm'>
-                                            <p className='tracking-wide'>{selectedDocuments && selectedDocuments.length} Documents</p>
-                                            <MdKeyboardArrowDown className={`${nav2DocToggle ? 'rotate-180' : ''} transition-all`} />
-                                        </div>
-
-
-                                        <div
-                                            className={`absolute max-w-max shadow rounded-md mt-1 px-2 py-1 z-20 bg-white ${nav2DocToggle ? '' : 'hidden'}`}>
-                                            {selectedDocuments.length && selectedDocuments.map((document, indx) => {
-                                                return (<div key={indx} className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-default'>
-                                                    <div className='flex items-center gap-1'>
-                                                        {/* <p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p> */}
-                                                        <IoIosDocument className='text-slate-600 text-lg' />
-                                                        <p className='whitespace-nowrap overflow-hidden text-ellipsis max-w-[15ch]'>{document.name}</p>
-                                                    </div>
-                                                </div>)
-                                            })}
-                                        </div>
-
-
-                                    </div>
-                                }
-                            </>
-
                             {/* Send */}
                             {/* {(!transparentTags && !hideTags) ? <button
                                 onClick={handleFormSubmit}
@@ -735,21 +786,53 @@ const SignDocument = () => {
                                 <p className="text-xs">Signed Successfully</p>
                             } */}
 
-
-
-                            <SignButton
+                            {recipient?.type !== "CC" ? <SignButton
                                 transparentTags={transparentTags}
                                 hideTags={hideTags}
                                 handleFormSubmit={handleFormSubmit}
                                 onDeclineClick={() => setDeclineOpen(true)}
                                 onReassignClick={() => setReassignOpen(true)}
-                            />
+                            /> : <button
+                                className="text-xs bg-[var(--primary)] rounded-md text-white flex items-center gap-1 w-full cursor-pointer text-left px-4 py-2 hover:bg-gray-100"
+                            >
+                                <FaDownload className="sm" />
+                                <span>Download</span>
+                            </button>}
+
+
+                            <>
+                                <div className={`absolute z-50 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 z-10`}>
+                                    {/* <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'>
+                                        <FaAngleLeft
+                                            onClick={() => handleTagNavClick("P")}
+                                            className="bg-[var(--mainPrimaryBtn)] p-1 text-2xl text-white rounded-md" />
+                                        <div>
+                                            <span className="text-[var(--mainPrimaryBtn)]">{focusElement?.navigationOrder}</span>
+                                            <span> / </span>
+                                            <span>{droppedItems.length}</span>
+                                            <span> Fields</span>
+                                        </div>
+                                        <FaAngleRight
+                                            onClick={() => handleTagNavClick("N")}
+                                            className="bg-[var(--mainPrimaryBtn)] p-1 text-2xl text-white rounded-md" />
+                                    </div>
+                                    <p className='text-sm text-white bg-[var(--mainPrimaryBtn)] px-4 py-2 rounded'
+                                        onClick={handleFormSubmit}
+                                    >Sign</p>
+                                </div>
+                            </>
+
 
                         </div>
                         {/* Right Side - ENDS */}
                     </div>
                     {/* Nav Two - Options - End */}
 
+
+
+
+
                     {/* Document Container Start  */}
                     <div className="grid grid-cols-12 gap-1 mt-1 h-[calc(100vh-48px)] overflow-hidden">
 
@@ -757,8 +840,8 @@ 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={`col-span-2 h-full ${isFields ? "p-4" : ""} overflow-y-auto bg-white ${!provideTags && isFields ? "hidden" : ""}`}>
-                            {isFields && recipientId && provideTags && <FieldList color={"#8f87f1"} recipientId={Number(recipientId)} recipientIndx={0} acntId={"1"} />}
+                            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-[100vh] ${isFields ? "p-4" : ""} overflow-y-auto ${recipient?.type !== "CC" ? "bg-white" : ""} ${!provideTags && isFields ? "hidden" : ""}`}>
+                            {isFields && recipientId && provideTags && recipient?.type !== "CC" && <FieldList color={"#8f87f1"} recipientId={Number(recipientId)} recipientIndx={0} acntId={"1"} />}
 
                             {!isFields && <DocumentPages
                                 selectedDocuments={selectedDocuments}
@@ -771,7 +854,7 @@ const SignDocument = () => {
                         {/* Main container */}
                         <div
                             id="doc-con"
-                            className={`zoom-con relative ${!isFields || (isFields && provideTags) ? "col-span-8" : "col-span-12"} px-4 bg-slate-100 h-full w-full overflow-auto scroll-smooth transition-all duration-200`}
+                            className={`zoom-con relative ${provideTags ? (isFields && selectedTag !== null ? "col-span-8" : "col-span-10") : (isFields ? "col-span-12" : "col-span-10")} px-[2.4rem] 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) => {
@@ -786,7 +869,6 @@ const SignDocument = () => {
                                                     doc.pages && doc.pages.length > 0 && doc.pages.map((page, indx) => {
                                                         const key = `${doc.documentId}_${page.index}`;
                                                         // const tagJsonData = [...droppedItems];
-                                                        // debugger
                                                         const currDocTags = droppedItems.filter((val) => val.pageIndex === page.index)
                                                         return (
                                                             <div
@@ -817,7 +899,9 @@ const SignDocument = () => {
                                                                         setSignTagId={setSignTagId}
                                                                         setDroppedItems={setDroppedItems}
                                                                         setSelectedTag={setSelectedTag}
-                                                                        setFocusElement={setFocusElement} />
+                                                                        setFocusElement={setFocusElement}
+                                                                        handleTagNavClick={handleTagNavClick}
+                                                                    />
                                                                 </>}
 
                                                                 <img
@@ -830,7 +914,7 @@ const SignDocument = () => {
 
 
                                                                 {/* 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' >
+                                                                < p className='absolute top-[50%] translate-y-[-50%] rotate-[-90deg] text-xs left-[-50px] text-slate-600' >
                                                                     page {indx + 1} of {doc.pages && doc.pages.length}
                                                                 </p>
                                                                 {/* Side details of documents Pages and document Name - END */}
@@ -866,171 +950,13 @@ const SignDocument = () => {
                         }
                     </div>
                     {/* Document Container End */}
-                </div>
-            </>}
-
-            {signerConsent && <>
-                <div className='w-full h-full'>
-
-                    <div className="flex items-center space-x-4 bg-white w-full py-2 px-5 shadow">
-                        <Link to={'/'} className="flex items-center space-x-2 text-gray-600 hover:text-[var(--primary)] transition-colors duration-200 group">
-                            {/* <IoMdHome
-                                className='text-2xl text-slate-500 cursor-pointer hover:text-[var(--primary)] transition'
-                            /> */}
-                            SME
-                        </Link>
-                        <div className="h-8 w-px bg-gray-300"></div>
-                        <h1 className="text-md text-gray-800">🎉 The document has been signed successfully!</h1>
-                    </div>
-
-                    <div className='flex flex-col p-4 justify-center items-center w-full'>
-
-                        <div className='mx-auto max-w-max'>
-                            <div className='flex items-center gap-4 mb-3 ml-0 bg-slate-100 p-4 rounded-md'>
-                                <div className="w-12 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-2xl" />
-                                </div>
-                                <div>
-                                    <p className='text-2xl font-medium text-[var(--primary)]'>You have successfully signed the document.</p>
-                                    {/* <p className='text-sm text-slate-600'>All signers will be notified via email</p> */}
-                                </div>
-                            </div>
-
-                            <div className='flex gap-4'>
-                                <div className='pb-4 bg-slate-100'>
-                                    <div className='w-full overflow-auto h-[calc(100vh-200px)]'>
-                                        <div className='py-2 bg-white pl-4 pr-4 shadow-sm rounded-sm border-1 border-slate-200 sticky top-0 w-full z-1'>
-                                            <p className='text-sm font-medium'>QuickPreview</p>
-                                        </div>
-                                        {/* <NavTwo isPreview={true} aId={accountId} tId={transactionId} /> */}
-                                        <div className='pl-4 pr-4'>
-                                            {/* SIGN Documen Container - START */}
-                                            <div
-                                                id="doc-con"
-                                                className={`relative px-4 bg-slate-100 max-w-max h-full w-full overflow-auto scroll-smooth transition-all duration-200`}
-                                            >
-                                                {
-                                                    selectedDocuments && selectedDocuments.length > 0 && selectedDocuments.map((doc) => {
-                                                        return (
-                                                            <div key={doc.documentId} className='flex flex-col pointer-events-none'>
-                                                                <div className='py-2 text-sm'>
-                                                                    <p className='text-center'>{doc.name}</p>
-                                                                </div>
-
-                                                                <div className='flex flex-col gap-3 max-w-max relative'>
-                                                                    {
-                                                                        doc.pages && doc.pages.length > 0 && doc.pages.map((page, indx) => {
-                                                                            const key = `${doc.documentId}_${page.index}`;
-                                                                            // const tagJsonData = [...droppedItems];
-                                                                            // debugger
-                                                                            const currDocTags = droppedItems.filter((val) => val.pageIndex === page.index)
-                                                                            return (
-                                                                                <div
-                                                                                    key={indx}
-                                                                                    id={doc.documentId + indx}
-                                                                                    onDrop={(e) => handleDrop(e, doc.documentId, doc.documentId, page.index)}
-                                                                                    onDragOver={(e) => handleDragOver(e)}
-                                                                                    className='drop-page-in shadow-md relative'
-                                                                                >
-
-                                                                                    {!hideTags && <>
-                                                                                        <TagsCon
-                                                                                            currDocTags={currDocTags}
-                                                                                            pageIdkey={key}
-                                                                                            provideTags={provideTags}
-                                                                                            documentId={doc.documentId}
-                                                                                            pageIndex={page.index}
-                                                                                            hideTags={hideTags}
-                                                                                            transparentTags={transparentTags}
-                                                                                            focusElement={focusElement}
-                                                                                            selectedTag={selectedTag}
-                                                                                            droppedItems={droppedItems}
-                                                                                            saved={saved}
-                                                                                            signConfObj={signConfObj}
-                                                                                            setStamp={setStamp}
-                                                                                            setSignConfObj={setSignConfObj}
-                                                                                            setOpenSign={setOpenSign}
-                                                                                            setSignTagId={setSignTagId}
-                                                                                            setDroppedItems={setDroppedItems}
-                                                                                            setSelectedTag={setSelectedTag}
-                                                                                            setFocusElement={setFocusElement} />
-                                                                                    </>}
-
-                                                                                    <img
-                                                                                        style={{ "minWidth": page.width, "minHeight": page.height, "maxWidth": page.width, "maxHeight": page.height }}
-                                                                                        draggable="false"
-                                                                                        width={page.width}
-                                                                                        height={page.height}
-                                                                                        src={page.src}
-                                                                                    />
-
-
-                                                                                    {/* 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}
-                                                                                    </p>
-                                                                                    {/* Side details of documents Pages and document Name - END */}
-
-
-                                                                                </div>
-                                                                            )
-                                                                        })
-                                                                    }
-                                                                </div>
-
-
-                                                            </div>
-                                                        )
-                                                    })
-                                                }
-
-                                            </div>
-                                            {/* SIGN Documen Container - END */}
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div className="flex flex-col gap-2">
-                                    <Link to={"/"} className="px-4 py-2 rounded-sm text-white bg-[var(--primary)] lg:min-w-[240px] text-center">Download Document</Link>
-                                    <Link to={"/"} className="px-4 py-2 rounded-sm text-white bg-[var(--primary)] lg:min-w-[240px] text-center">Visit Sign Made Easy</Link>
-                                </div>
-
-                                {/* Right Side */}
-                                {/* <div className={`transition-all rounded-lg duration-700 ${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'}`}> */}
-
-                                {/* <div className="text-center pt-1 max-h-[25vh]">
-                                    <div className="w-20 h-20 bg-gradient-to-br from-teal-500 to-green-400 rounded-full flex items-center justify-center mt-3 mx-auto shadow-lg ">
-                                        <FaCheck className="text-white text-4xl" />
-                                    </div>
-                                </div> */}
-
-                                {/* <div className='text-center py-1'>
-                                    <h3 className="text-2xl font-bold text-gray-800 mb-2">Document Send Successfully!</h3>
-                                </div> */}
-                                {/* <div className='max-h-[30vh]'> */}
-                                {/* <SignersList signers={selectedRecipients} /> */}
-                                {/* </div> */}
-
-                                {/* <div className='mt-4 flex flex-col gap-2'>
-                                        {selfUserSign.sign && <Link to={`/sign/${selfUserSign.recipientId}`} className={`p-2 text-center rounded-md bg-[var(--primary)] text-white hover:shadow-sm transition-all duration-150`}>Sign Now</Link>}
-                                        <Link to={"/"} className={`p-2 text-center rounded-md bg-slate-200 hover:shadow-sm transition-all duration-150`}>Home</Link>
-                                    </div> */}
-
-                                {/* <div className='border border-b border-gray-50'></div> */}
-                                {/* <div className='min-h-[30vh]'>
-                                    <SigningOrderDiagram signers={selectedRecipients} />
-                                </div> */}
-                                {/* <div className='border border-b border-gray-50'></div> */}
-
-                                {/* </div> */}
-                            </div>
-
-                        </div>
-                    </div>
 
                 </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} />} */}
+
             <div style={{ display: `${openSign ? 'block' : 'none'}` }}>
                 {recipient &&
                     <SignCon
@@ -1050,21 +976,23 @@ const SignDocument = () => {
 
             {globalLoader.isLoading && <Loader />}
 
-            {!showCompletionScreen && !signerConsent.consent && <ConsentScreen
-                onConsent={() => handleOnConsent()}
-            // onDecline={() => console.log("User declined")}
-            />}
+            {
+                selectedDocuments !== null && !showCompletionScreen && !signerConsent.consent && <ConsentScreen
+                    onConsent={() => handleOnConsent()}
+                // onDecline={() => console.log("User declined")}
+                />
+            }
 
             <DeclineModal
                 open={declineOpen}
                 onClose={() => setDeclineOpen(false)}
-                onConfirm={() => setSignerConsent((prev) => ({ ...prev, decline: false }))}
+                onConfirm={({ reason, comments }) => handleDeclineConfirm(reason, comments)}
             />
 
             <ReassignModal
                 open={reassignOpen}
                 onClose={() => setReassignOpen(false)}
-                onConfirm={(email) => console.log("Reassigned to:", email)}
+                onConfirm={({ firstName, lastName, email, message }) => handleReassignConfirm({ firstName, lastName, email, message })}
             />
 
         </div >
diff --git a/src/components/client/TagsCon.tsx b/src/components/client/TagsCon.tsx
index 3334247..989418f 100644
--- a/src/components/client/TagsCon.tsx
+++ b/src/components/client/TagsCon.tsx
@@ -11,6 +11,7 @@ import api from '../../config/api';
 import { SaveType, SignConfTypeObj, StampTypeObj } from './SignDocument';
 import dayjs from 'dayjs';
 import typeToIconMap from '../../helper/iconMap';
+import { TiArrowSortedUp } from "react-icons/ti";
 
 
 interface TagsConProps {
@@ -33,6 +34,7 @@ interface TagsConProps {
     setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItem[]>>;
     setSelectedTag: React.Dispatch<React.SetStateAction<{ key: string; index: number } | null>>
     setFocusElement: React.Dispatch<React.SetStateAction<DroppedItem | null>>
+    handleTagNavClick: (action: "N" | "P") => void
 }
 
 const TagsCon: React.FC<TagsConProps> = ({
@@ -54,7 +56,8 @@ const TagsCon: React.FC<TagsConProps> = ({
     setSignTagId,
     setDroppedItems,
     setSelectedTag,
-    setFocusElement
+    setFocusElement,
+    handleTagNavClick
 }) => {
 
     const [dateValues, setDateValues] = useState<{ [key: string]: string }>({});
@@ -230,7 +233,6 @@ const TagsCon: React.FC<TagsConProps> = ({
         // });
     }
 
-
     const handleSignClick = (index: number, id: number) => {
         setSignTagId(id)
         if (saved.save) {
@@ -279,7 +281,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                 if (item.pageIndex !== pageIndex || item.documentId != documentId) return <></>;
                 return (
                     <div
-                        tabIndex={index+1}
+                        tabIndex={index + 1}
                         onFocus={() => {
                             setSelectedTag({ key: pageIdkey, index })
                             // setFocusElement({ ...item, focusElementIndx: index })
@@ -309,7 +311,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                         </div>}
 
                         <>
-                            {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'
@@ -332,7 +334,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                         {
                             item.type === "TEXT" &&
                             <div
-                                id={item.id}
+                                id={item.navigationOrder}
                                 tabIndex={1}
                                 className={`max-h-max text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-nones" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
                             // style={{ height: item.dimensions.height + "px" }}
@@ -401,7 +403,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                         {
                             item.type === "EMAIL" &&
                             <div
-                                id={item.id}
+                                id={item.navigationOrder}
                                 tabIndex={1}
                                 className={`h-full text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-nones" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
                             >
@@ -454,7 +456,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                         {
                             item.type === "NAME" &&
                             <div
-                                id={item.id}
+                                id={item.navigationOrder}
                                 tabIndex={1}
                                 className={`h-full text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-nones" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
                             >
@@ -490,7 +492,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                         {
                             item.type === "NUMBER" &&
                             <div
-                                id={item.id}
+                                id={item.navigationOrder}
                                 tabIndex={1}
                                 className={`h-full text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-nones" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
                             >
@@ -514,7 +516,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                         {
                             item.type === "COMPANY" &&
                             <div
-                                id={item.id}
+                                id={item.navigationOrder}
                                 tabIndex={1}
                                 className={`h-full text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-nones" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
                             >
@@ -548,7 +550,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                         {
                             item.type === "CHECKBOX" &&
                             <div
-                                id={item.id}
+                                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"}`}
                             // style={{ height: item.dimensions.height + "px" }}
                             >
@@ -567,7 +569,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                             item.type === "SIGNATURE" &&
                             <div
                                 tabIndex={1}
-                                id={item.id}
+                                id={item.navigationOrder}
                                 onClick={() => handleSignClick(index, item.id)}
                                 className={`flex justify-center items-center h-full w-full rounded cursor-pointer ${transparentTags || hideTags ? "pointer-events-none bg-transparent" : "bg-slate-200 shadow-sm border-slate-100 opacity-80"}`}
                             // style={{ height: item.dimensions.height + "px" }}
@@ -598,7 +600,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                             item.type === "INITIALS" &&
                             <div
                                 tabIndex={1}
-                                id={item.id}
+                                id={item.navigationOrder}
                                 onClick={() => handleSignClick(index, item.id)}
                                 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 opacity-80"}`}
                             // style={{ height: item.dimensions.height + "px" }}
@@ -626,7 +628,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                             item.type === "STAMP" &&
                             <div
                                 tabIndex={1}
-                                id={item.id}
+                                id={item.navigationOrder}
                                 onClick={() => handleStampClick(index)}
                                 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 opacity-80"}`}
                             // style={{ height: item.dimensions.height + "px" }}
@@ -645,7 +647,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                             item.type === "FILE" &&
                             <div
                                 tabIndex={1}
-                                id={item.id}
+                                id={item.navigationOrder}
                                 // onClick={() => handleSignClick(index)}
                                 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 opacity-80"}`}
                             // style={{ height: item.dimensions.height + "px" }}
@@ -664,7 +666,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                         {
                             item.type === "SELECT" &&
                             <div
-                                id={item.id}
+                                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"}`}
                             >
@@ -701,7 +703,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                         {
                             item.type === "TEMPORAL" &&
                             <div
-                                id={item.id}
+                                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"}`}
                             >
@@ -752,7 +754,7 @@ const TagsCon: React.FC<TagsConProps> = ({
                             item.type.toLowerCase() === TagsTypes.ATTACHMENT &&
                             <div
                                 tabIndex={1}
-                                id={item.id}
+                                id={item.navigationOrder}
                                 // onClick={() => handleStampClick(index)}
                                 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 opacity-80"}`}
                             // style={{ height: item.dimensions.height + "px" }}
@@ -787,12 +789,24 @@ const TagsCon: React.FC<TagsConProps> = ({
                                                                                             <p>{focusElement.label}</p>
                                                                                         </div> */}
                                 <div
-                                    className="absolute left-[-10px] z-50 flex max-w-max"
-                                    style={{ left: -(item.dimensions.left + 20) + "px", top: ((item.dimensions.height / 2) - 18) + "px" }}
+                                    className="absolute z-[1000] flex flex-col items-center max-w-max bg-[var(--primary)] rounded-tl-md rounded-bl-md"
+                                    style={{ left: -(item.dimensions.left + 36) + "px", top: ((item.dimensions.height / 2) - 43) + "px" }}
                                 >
-                                    {/* <FaArrowRight className="text-[var(--primary)] text-xl" />
-                                                                                     */}
-                                    <BsFileArrowDownFill className="text-blue-900 text-4xl rotate-270" />
+                                    <span className='pt-2 pb-1 text-white cursor-pointer'
+                                    onClick={() => {
+                                        handleTagNavClick("P")
+                                    }}
+                                    >
+                                        <TiArrowSortedUp />
+                                    </span>
+                                    <p className='p-2 border-t-1 border-b-1 border-slate-700 text-white text-xs'><span>{focusElement.navigationOrder}</span><span>/{droppedItems.length}</span></p>
+                                    <span className='pb-2 pt-1 text-white cursor-pointer'
+                                    onClick={() => {
+                                        handleTagNavClick("N")
+                                    }}
+                                    >
+                                        <TiArrowSortedUp className='rotate-180' />
+                                    </span>
                                 </div>
                             </>
                         }
diff --git a/src/components/client/draft.save.jsx b/src/components/client/draft.save.jsx
new file mode 100644
index 0000000..3dfb648
--- /dev/null
+++ b/src/components/client/draft.save.jsx
@@ -0,0 +1,179 @@
+            {showCompletionScreen && (
+                <div className="w-full h-full">
+                    {/* Header */}
+                    <div className="flex flex-wrap items-center gap-2 sm:gap-4 bg-white w-full py-2 px-4 sm:px-5 shadow">
+                        <Link
+                            to={"/"}
+                            className="flex items-center space-x-2 text-gray-600 hover:text-[var(--primary)] transition-colors duration-200 group text-sm sm:text-base"
+                        >
+                            SME
+                        </Link>
+                        <div className="h-6 sm:h-8 w-px bg-gray-300"></div>
+                        {recSignStatus === "COMPLETED" && (
+                            <h1 className="text-sm sm:text-md text-gray-800">
+                                🎉 The document has been signed successfully!
+                            </h1>
+                        )}
+                        {recSignStatus === "DECLINED" && (
+                            <h1 className="text-sm sm:text-md text-gray-800">
+                                ❌ The document has been declined by you.
+                            </h1>
+                        )}
+                    </div>
+
+                    {/* Content */}
+                    <div className="flex flex-col p-4 justify-center items-center w-full">
+                        <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" && (
+                                    <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" && (
+                                    <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" && (
+                                        <p className="text-lg sm:text-2xl font-medium text-[var(--primary)]">
+                                            You have successfully signed the document.
+                                        </p>
+                                    )}
+                                    {recSignStatus === "DECLINED" && (
+                                        <p className="text-lg sm:text-2xl font-medium text-[var(--primary)]">
+                                            You have declined the document.
+                                        </p>
+                                    )}
+                                </div>
+                            </div>
+
+                            {/* Main responsive layout */}
+                            <div className="flex flex-col lg:flex-row gap-4">
+                                {/* Left: Quick Preview */}
+                                <div className="flex-1 bg-slate-100 rounded-md overflow-hidden">
+                                    <div className="w-full h-[60vh] lg:h-[calc(100vh-200px)] overflow-auto">
+                                        <div className="py-2 bg-white px-4 shadow-sm rounded-sm sticky top-0 z-10">
+                                            <p className="text-sm font-medium">Quick Preview</p>
+                                        </div>
+
+                                        <div className="px-4">
+                                            {/* SIGN Document Container */}
+                                            <div
+                                                id="doc-con"
+                                                className="relative px-2 sm:px-4 bg-slate-100 w-full overflow-auto scroll-smooth transition-all duration-200"
+                                            >
+                                                {selectedDocuments &&
+                                                    selectedDocuments.length > 0 &&
+                                                    selectedDocuments.map((doc) => (
+                                                        <div
+                                                            key={doc.documentId}
+                                                            className="flex flex-col pointer-events-none"
+                                                        >
+                                                            <div className="py-2 text-xs sm:text-sm">
+                                                                <p className="text-center">{doc.name}</p>
+                                                            </div>
+
+                                                            <div className="flex flex-col gap-3 relative">
+                                                                {doc.pages &&
+                                                                    doc.pages.length > 0 &&
+                                                                    doc.pages.map((page, indx) => {
+                                                                        const key = `${doc.documentId}_${page.index}`
+                                                                        const currDocTags = droppedItems.filter(
+                                                                            (val) => val.pageIndex === page.index
+                                                                        )
+                                                                        return (
+                                                                            <div
+                                                                                key={indx}
+                                                                                id={doc.documentId + indx}
+                                                                                onDrop={(e) =>
+                                                                                    handleDrop(
+                                                                                        e,
+                                                                                        doc.documentId,
+                                                                                        doc.documentId,
+                                                                                        page.index
+                                                                                    )
+                                                                                }
+                                                                                onDragOver={(e) => handleDragOver(e)}
+                                                                                className="drop-page-in shadow-md relative"
+                                                                            >
+                                                                                {!hideTags && (
+                                                                                    <TagsCon
+                                                                                        currDocTags={currDocTags}
+                                                                                        pageIdkey={key}
+                                                                                        provideTags={provideTags}
+                                                                                        documentId={doc.documentId}
+                                                                                        pageIndex={page.index}
+                                                                                        hideTags={hideTags}
+                                                                                        transparentTags={transparentTags}
+                                                                                        focusElement={focusElement}
+                                                                                        selectedTag={selectedTag}
+                                                                                        droppedItems={droppedItems}
+                                                                                        saved={saved}
+                                                                                        signConfObj={signConfObj}
+                                                                                        setStamp={setStamp}
+                                                                                        setSignConfObj={setSignConfObj}
+                                                                                        setOpenSign={setOpenSign}
+                                                                                        setSignTagId={setSignTagId}
+                                                                                        setDroppedItems={setDroppedItems}
+                                                                                        setSelectedTag={setSelectedTag}
+                                                                                        setFocusElement={setFocusElement}
+                                                                                    />
+                                                                                )}
+
+                                                                                <img
+                                                                                    style={{
+                                                                                        minWidth: page.width,
+                                                                                        minHeight: page.height,
+                                                                                        maxWidth: page.width,
+                                                                                        maxHeight: page.height,
+                                                                                    }}
+                                                                                    draggable="false"
+                                                                                    width={page.width}
+                                                                                    height={page.height}
+                                                                                    src={page.src}
+                                                                                />
+
+                                                                                {/* Page info */}
+                                                                                <p className="absolute top-1/2 -translate-y-1/2 -rotate-90 text-[10px] sm:text-xs left-[-50px] sm:left-[-60px] text-slate-600">
+                                                                                    page {indx + 1} of{" "}
+                                                                                    {doc.pages && doc.pages.length}
+                                                                                </p>
+                                                                            </div>
+                                                                        )
+                                                                    })}
+                                                            </div>
+                                                        </div>
+                                                    ))}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                {/* Right: Actions */}
+                                <div className="flex flex-col gap-2 w-full lg:w-[280px]">
+                                    <Link
+                                        to={"/"}
+                                        className="px-4 py-2 rounded-sm text-white bg-[var(--primary)] w-full text-center"
+                                    >
+                                        Download Document
+                                    </Link>
+                                    <Link
+                                        to={"/"}
+                                        className="px-4 py-2 rounded-sm text-white bg-[var(--primary)] w-full text-center"
+                                    >
+                                        Visit Sign Made Easy
+                                    </Link>
+                                    {recSignStatus === "DECLINED" && (
+                                        <p className="italic text-slate-400 text-center mt-2 cursor-pointer hover:underline">
+                                            Report Sender ?
+                                        </p>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
\ No newline at end of file
diff --git a/src/components/dashboard/SideBar.tsx b/src/components/dashboard/SideBar.tsx
index a6ff16f..5664263 100644
--- a/src/components/dashboard/SideBar.tsx
+++ b/src/components/dashboard/SideBar.tsx
@@ -70,7 +70,8 @@ const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar, isMobile
                 {/* Menu */}
                 <div className={`absolute top-0 ${showSideBar ? 'p-4' : 'py-4'} w-full max-h-max ${showSideBar ? '' : 'text-center'}`}>
                     <h1 className='w-full text-lg text-center tracking-widest font-medium text-gray-800'>
-                        {showSideBar ? <img src={logoSME} loading='lazy' className='h-7 ms-6' /> : <p className='text-white'>SME</p>}
+                        <img className={`${!showSideBar ? "hidden" : ""} h-7 ms-6`} src={logoSME} loading='lazy' /> 
+                        <p className={`text-white ${showSideBar ? "hidden" : ""}`}>SME</p>
                     </h1>
 
                     <div
diff --git a/src/components/home/Cards.tsx b/src/components/home/Cards.tsx
index e432fcf..c333c03 100644
--- a/src/components/home/Cards.tsx
+++ b/src/components/home/Cards.tsx
@@ -98,8 +98,6 @@ const accounts = ['All Accounts', 'Account 1', 'Account 2', 'Account 3'];
 
 const Cards: React.FC<CardsProps> = ({ type = 'dashboard', onOpenModal, onDateRangeChange, cards, isLoading }) => {
   const [selectedFilter, setSelectedFilter] = useState<string>('Last 7 Days');
-  const [selectedAccount, setSelectedAccount] = useState<string>('All Accounts');
-  const [showCards, setShowCards] = useState<CardData[]>([]);
   // const [isLoading, setIsLoading] = useState<boolean>(true);
 
   // useEffect(() => {
@@ -188,110 +186,49 @@ const Cards: React.FC<CardsProps> = ({ type = 'dashboard', onOpenModal, onDateRa
     );
   };
 
-  // if (isLoading) {
-  //   return (
-  //     <div className="w-full [h-50vh] px-6 py-8">
-  //       <div className="animate-pulse">
-  //         <div className="h-8 bg-gray-200 rounded w-32 mb-8"></div>
-  //         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-  //           {[...Array(7)].map((_, i) => (
-  //             <div key={i} className="h-32 bg-gray-200 rounded-xl"></div>
-  //           ))}
-  //         </div>
-  //       </div>
-  //     </div>
-  //   );
-  // }
-
   return (
     <div className="w-full">
-  {/* Cards */}
-  {isLoading ? (
-    <div className="w-full h-[10vh] px-6 py-3">
-      <div className="animate-pulse">
-        {/* <div className="h-8 bg-gray-200 rounded w-32 mb-8"></div> */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
-          {[...Array(4)].map((_, i) => (
-            <div key={i} className="h-10 bg-gray-200 border border-gray-100"></div>
+      {/* Cards */}
+      {isLoading ? (
+        <div className="w-full h-[10vh] px-6 py-3">
+          <div className="animate-pulse">
+            {/* <div className="h-8 bg-gray-200 rounded w-32 mb-8"></div> */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
+              {[...Array(4)].map((_, i) => (
+                <div key={i} className="h-10 bg-gray-200 border border-gray-100"></div>
+              ))}
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 shadow">
+          {cards.map((card, index) => (
+            <div
+              key={card.title}
+              className={`flex items-center justify-between bg-white px-4 py-3.5 transition-all duration-300 cursor-pointer ${index > 0 ? "border-l-1 border-gray-200" : ""}`}
+              style={{
+                animationDelay: `${index * 100}ms`,
+              }}
+            >
+              {/* Left side: Icon + Title */}
+              <div className="flex items-center gap-3">
+                <div className={`p-1.5 rounded-lg ${card.iconBg}`}>
+                  {card.icon}
+                </div>
+                <h3 className="text-xs font-medium text-gray-600 text-nowrap">{card.title}</h3>
+              </div>
+
+              {/* Count */}
+              <p className={`text-sm font-bold`}>
+                {card.count}
+              </p>
+            </div>
           ))}
         </div>
-      </div>
+      )}
     </div>
-  ) : (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
-      {cards.map((card, index) => (
-        <div
-          key={card.title}
-          className="flex items-center justify-between border border-gray-200 bg-white px-4 py-1.5 hover:shadow-md transition-all duration-300 cursor-pointer"
-          style={{
-            animationDelay: `${index * 100}ms`,
-          }}
-        >
-          {/* Left side: Icon + Title */}
-          <div className="flex items-center gap-3">
-            <div className={`p-2 rounded-lg ${card.iconBg}`}>
-              {card.icon}
-            </div>
-            <h3 className="text-xs font-medium text-gray-600">{card.title}</h3>
-          </div>
-
-          {/* Count */}
-          <p className={`text-sm font-bold ${card.textColor}`}>
-            {card.count}
-          </p>
-        </div>
-      ))}
-    </div>
-  )}
-</div>
 
   );
 };
 
-export default Cards;
-
-
-
-
-{/* <div className="flex flex-wrap gap-3 w-full lg:w-auto">
-          {type === 'dashboard' && <>
-            Account Selector
-            <div className="relative">
-              <select
-                value={selectedAccount}
-                onChange={(e) => setSelectedAccount(e.target.value)}
-                className="appearance-none text-sm text-gray-700 border border-gray-300 rounded-xl px-4 py-3 pr-10 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white shadow-sm hover:shadow-md transition-all cursor-pointer min-w-[140px]"
-              >
-                {accounts.map((account) => (
-                  <option key={account} value={account}>{account}</option>
-                ))}
-              </select>
-              <FaChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs pointer-events-none" />
-            </div>
-
-            Date Filter
-            <div className="relative">
-              <select
-                value={selectedFilter}
-                onChange={(e) => setSelectedFilter(e.target.value)}
-                className="appearance-none text-sm text-gray-700 border border-gray-300 rounded-xl px-4 py-3 pr-10 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white shadow-sm hover:shadow-md transition-all cursor-pointer min-w-[140px]"
-              >
-                {filters.map((filter) => (
-                  <option key={filter} value={filter}>{filter}</option>
-                ))}
-              </select>
-              <FaCalendarAlt className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs pointer-events-none" />
-            </div>
-          </>}
-
-          Action Button
-          {buttonConfig && (
-            <button
-              className={`flex items-center gap-1 px-3 py-3 text-sm font-semibold text-white rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105 active:scale-95 cursor-pointer ${buttonConfig.gradient}`}
-              onClick={onOpenModal}
-            >
-              {buttonConfig.icon}
-              {buttonConfig.text}
-            </button>
-          )}
-        </div> */}
\ No newline at end of file
+export default Cards;
\ No newline at end of file
diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
index 9d960b3..cb8a45f 100644
--- a/src/components/home/Home.tsx
+++ b/src/components/home/Home.tsx
@@ -4,6 +4,7 @@ import Cards from './Cards';
 import StartSection from './StartSection';
 import api from '../../config/api';
 import { FiFileText, FiClock, FiAlertTriangle, FiCheckCircle } from "react-icons/fi";
+import { CgSandClock } from "react-icons/cg";
 import { useSelector } from 'react-redux';
 import { RootState } from '../../store/store';
 
@@ -25,8 +26,8 @@ const Home = () => {
             {
                 title: "Action Required",
                 count: data.actionNeeded || 0,
-                icon: <FiFileText className="w-5 h-5 text-sky-500" />,
-                iconBg: "bg-sky-100 border-sky-200",
+                icon: <FiFileText className="w-5 h-5 text-[#0080FF]" />,
+                iconBg: "bg-[#F3F9FF]",
                 textColor: "text-sky-600",
                 gradient: "bg-white",
                 shadowColor: "shadow-sky-100",
@@ -35,7 +36,7 @@ const Home = () => {
                 title: "Waiting for Response",
                 count: data.waitingForOthers || 0,
                 icon: <FiClock className="w-5 h-5 text-yellow-500" />,
-                iconBg: "bg-yellow-100 border-yellow-200",
+                iconBg: "bg-[#FFF9EB]",
                 textColor: "text-yellow-600",
                 gradient: "bg-white",
                 shadowColor: "shadow-yellow-100",
@@ -43,8 +44,8 @@ const Home = () => {
             {
                 title: "Expiring Soon",
                 count: data.expiring || 0,
-                icon: <FiAlertTriangle className="w-5 h-5 text-red-500" />,
-                iconBg: "bg-red-100 border-red-200",
+                icon: <CgSandClock className="w-5 h-5 text-red-500" />,
+                iconBg: "bg-[#FFF8F8]",
                 textColor: "text-red-600",
                 gradient: "bg-white",
                 shadowColor: "shadow-red-100",
@@ -53,7 +54,7 @@ const Home = () => {
                 title: "Completed",
                 count: data.completed || 0,
                 icon: <FiCheckCircle className="w-5 h-5 text-green-500" />,
-                iconBg: "bg-green-100 border-green-200",
+                iconBg: "bg-[#F1FFEF]",
                 textColor: "text-green-600",
                 gradient: "bg-white",
                 shadowColor: "shadow-green-100",
@@ -83,7 +84,7 @@ const Home = () => {
         try {
             const res = await api.get(`/api/accounts/${userData.account.id}/dashboard`, { params: payload });
             setDashboardData(res.data);
-            
+
             const cardDataArray = mapApiDataToCards(res.data);
             setCards(cardDataArray);
         } catch (error) {
@@ -154,7 +155,9 @@ const Home = () => {
                 cards={cards}
                 isLoading={isLoading}
             />
-            <StartSection />
+            <div className='px-4 pt-2'>
+                <StartSection />
+            </div>
         </>
     );
 };
diff --git a/src/components/home/StartNow.tsx b/src/components/home/StartNow.tsx
index f01dd59..08c8536 100644
--- a/src/components/home/StartNow.tsx
+++ b/src/components/home/StartNow.tsx
@@ -1,26 +1,38 @@
 import { useRef, useState } from 'react';
 import { FiUpload } from 'react-icons/fi'
-import { resetDocuments, uploadDocuments } from '../../store/slices/documentSlice';
+import { handleMultipleTransactionThunk, resetDocuments, uploadDocuments } from '../../store/slices/documentSlice';
 import { useDispatch, useSelector } from 'react-redux';
 import { toast } from 'react-toastify';
 import { useNavigate } from 'react-router-dom';
 import { RootState } from '../../store/store';
 import api from '../../config/api';
+import TagsCon from '../client/TagsCon';
+import TransactionChoiceModal from './TransactionChoiceModal';
+import { resetRecipients } from '../../store/slices/selectedRecipientsSlice';
+import { AiOutlineConsoleSql } from 'react-icons/ai';
 
 
 const StartNow = () => {
     const fileInputRef = useRef<HTMLInputElement>(null);
     const [files, setFiles] = useState<File[]>([]);
 
+    const [transactionModal, setTransactionModal] = useState<{ open: boolean, isActive: boolean }>({
+        open: false,
+        isActive: true
+    });
+
+
     const userData = useSelector((state: RootState) => state.user);
 
     const dispatch = useDispatch();
     const navigate = useNavigate();
 
-    const handleUpload = async (filesToUpload: File[]) => {
-
+    const handleUpload = async (filesToUpload: File[] = files) => {
         const accountId = userData.account?.id;
-        const transactionRes = await api.post(`/api/accounts/${userData.account?.id}/transactions`);
+        
+        const subject = filesToUpload[0].name ? filesToUpload[0].name : "Untitled"
+        
+        const transactionRes = await api.post(`/api/accounts/${userData.account?.id}/transactions`, { subject });
         const transactionId = transactionRes.data.id
 
         const formData = new FormData();
@@ -41,40 +53,105 @@ const StartNow = () => {
             });
     };
 
+    const handleMultipleTransaction = async () => {
+        const filesToUpload = files;
+        const accountId = userData.account?.id;
+
+        const formData = new FormData();
+
+        filesToUpload.forEach(file => {
+            formData.append("file", file);
+        });
+
+        dispatch(handleMultipleTransactionThunk({ formData, accountId }))
+            .unwrap()
+            .then(() => {
+                // toast.dismiss();
+            })
+            .catch((err: unknown) => {
+                console.error("Upload failed", err);
+            });
+    }
+
     const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-       await dispatch(resetDocuments())
+        await dispatch(resetRecipients())
+        await dispatch(resetDocuments())
         const selectedFiles = e.target.files ? Array.from(e.target.files) : [];
         if (selectedFiles.length > 0) {
-            setFiles((prev) => [...prev, ...selectedFiles]);
-            handleUpload(selectedFiles);
+            setFiles((prev) => [...selectedFiles]);
+            // handleUpload(selectedFiles);
+            if (transactionModal.isActive && selectedFiles.length > 1) {
+                setTransactionModal({ open: true, isActive: true })
+            } else {
+                handleUpload(selectedFiles);
+            }
         }
     };
 
+    const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        await dispatch(resetRecipients())
+        await dispatch(resetDocuments())
+        const droppedFiles = Array.from(e.dataTransfer.files);
+        if (droppedFiles.length > 0) {
+            setFiles((prev) => [...prev, ...droppedFiles]);
+            if (transactionModal.isActive && droppedFiles.length > 1) {
+                setTransactionModal({ open: true, isActive: true })
+            } else {
+                handleUpload(droppedFiles);
+            }
+        }
+    };
+
+    const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+        e.preventDefault();
+    };
+
     return (
         <>
+            {transactionModal.isActive && files.length > 1 && <TransactionChoiceModal
+                open={transactionModal.open}
+                onClose={() => {
+                    setTransactionModal({ open: false, isActive: true })
+                }}
+                onCreateTransaction={() => {
+                    handleUpload()
+                    setTransactionModal({ open: false, isActive: true })
+                }}
+                onCreateSeparateTransactions={() => {
+                    handleMultipleTransaction()
+                    setTransactionModal({ open: false, isActive: true })
+                }}
+            />}
             <div
                 onClick={() => fileInputRef.current?.click()}
+                onDrop={handleDrop}
+                onDragOver={handleDragOver}
                 id='start-now-upload-con'
-                className="group col-span-1 cursor-pointer border-2 border-dashed border-slate-300 rounded-lg bg-[var(--documentUploadBg)] transition-all duration-200 p-4 flex flex-col items-center justify-center gap-2 text-center shadow-sm hover:shadow-md">
-                {/* Upload icon with subtle animation */}
-                <div className="p-2 text-blue-600 group-hover:text-blue-700 transition-colors">
-                    <FiUpload className="text-lg" />
-                </div>
+                className="group col-span-1 cursor-pointer border-1 border-dashed border-[#D3D3D3] rounded-lg bg-[var(--documentUploadBg)] transition-all duration-200 p-4 flex flex-col items-center justify-center gap-2 text-center shadow-sm hover:shadow-md">
 
-                {/* Compact text */}
-                <p className="text-xs text-gray-600">
-                    <span className="text-blue-600 font-medium">Click to upload</span> or drag and drop
+                {/* Upload icon */}
+                <svg className="mt-4" width="44" height="46" viewBox="0 0 62 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M33.1043 45.9303V32.8347H41.8347L30.9217 19.739L20.0087 32.8347H28.7391V45.9303H17.8261V45.8212C17.4594 45.843 17.1102 45.9303 16.7348 45.9303C12.3933 45.9303 8.22964 44.2057 5.15976 41.1358C2.08988 38.0659 0.365234 33.9022 0.365234 29.5608C0.365234 21.1621 6.71661 14.3175 14.8665 13.3789C15.581 9.64361 17.5749 6.27402 20.505 3.84972C23.4352 1.42542 27.1186 0.0979427 30.9217 0.0956116C34.7253 0.0977141 38.4093 1.42501 41.3402 3.84927C44.2712 6.27352 46.2659 9.64323 46.9813 13.3789C55.1311 14.3175 61.4738 21.1621 61.4738 29.5608C61.4738 33.9022 59.7491 38.0659 56.6793 41.1358C53.6094 44.2057 49.4457 45.9303 45.1042 45.9303C44.7376 45.9303 44.384 45.843 44.0129 45.8212V45.9303H33.1043Z" fill="#34BEFF" />
+                </svg>
+
+                {/* Compact text | Upload or drag & drop files */}
+                <p className="">
+                    <svg width="230" height="24" viewBox="0 0 314 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M8.386 19.312C6.826 19.312 5.48267 19.0607 4.356 18.558C3.22933 18.0553 2.36267 17.2927 1.756 16.27C1.16667 15.23 0.872 13.9387 0.872 12.396V1.164H4.252V12.292C4.252 13.6613 4.60733 14.7013 5.318 15.412C6.046 16.1053 7.06867 16.452 8.386 16.452C9.70333 16.452 10.726 16.1053 11.454 15.412C12.1993 14.7013 12.572 13.6613 12.572 12.292V1.164H15.952V12.396C15.952 13.9387 15.6487 15.23 15.042 16.27C14.4353 17.2927 13.5687 18.0553 12.442 18.558C11.3153 19.0607 9.96333 19.312 8.386 19.312ZM19.5045 23.498V5.324H22.1305L22.3905 7.144H22.5725C23.0231 6.43333 23.6125 5.90467 24.3405 5.558C25.0685 5.194 25.8745 5.012 26.7585 5.012C27.8851 5.012 28.8471 5.26333 29.6445 5.766C30.4591 6.26867 31.0831 7.04867 31.5165 8.106C31.9671 9.16333 32.1925 10.524 32.1925 12.188C32.1925 13.8173 31.9671 15.1607 31.5165 16.218C31.0658 17.2753 30.4418 18.0553 29.6445 18.558C28.8645 19.0607 27.9631 19.312 26.9405 19.312C26.3165 19.312 25.7445 19.2427 25.2245 19.104C24.7045 18.9653 24.2451 18.7573 23.8465 18.48C23.4478 18.1853 23.1098 17.83 22.8325 17.414H22.6765V23.498H19.5045ZM25.7705 16.582C26.5505 16.582 27.1658 16.4347 27.6165 16.14C28.0845 15.828 28.4138 15.36 28.6045 14.736C28.8125 14.112 28.9165 13.3233 28.9165 12.37V12.006C28.9165 11.0353 28.8125 10.238 28.6045 9.614C28.4138 8.97267 28.0845 8.50467 27.6165 8.21C27.1658 7.898 26.5505 7.742 25.7705 7.742C25.0598 7.742 24.4705 7.90667 24.0025 8.236C23.5518 8.56533 23.2138 9.05067 22.9885 9.692C22.7805 10.316 22.6765 11.0873 22.6765 12.006V12.318C22.6765 12.994 22.7371 13.6007 22.8585 14.138C22.9798 14.658 23.1618 15.1 23.4045 15.464C23.6645 15.828 23.9851 16.1053 24.3665 16.296C24.7651 16.4867 25.2331 16.582 25.7705 16.582ZM34.8912 19V0.201999H38.0632V19H34.8912ZM47.526 19.312C46.0353 19.312 44.7873 19.0607 43.782 18.558C42.7766 18.038 42.0226 17.2493 41.52 16.192C41.0173 15.1347 40.766 13.7913 40.766 12.162C40.766 10.5153 41.0173 9.172 41.52 8.132C42.0226 7.07467 42.7766 6.29467 43.782 5.792C44.7873 5.272 46.0353 5.012 47.526 5.012C49.034 5.012 50.282 5.272 51.27 5.792C52.2753 6.29467 53.0293 7.07467 53.532 8.132C54.0346 9.172 54.286 10.5153 54.286 12.162C54.286 13.7913 54.0346 15.1347 53.532 16.192C53.0293 17.2493 52.2753 18.038 51.27 18.558C50.282 19.0607 49.034 19.312 47.526 19.312ZM47.526 16.712C48.358 16.712 49.0253 16.556 49.528 16.244C50.048 15.9147 50.4206 15.4293 50.646 14.788C50.8886 14.1293 51.01 13.3147 51.01 12.344V11.98C51.01 11.0093 50.8886 10.2033 50.646 9.562C50.4206 8.90333 50.048 8.418 49.528 8.106C49.0253 7.77667 48.358 7.612 47.526 7.612C46.694 7.612 46.018 7.77667 45.498 8.106C44.9953 8.418 44.6226 8.90333 44.38 9.562C44.1546 10.2033 44.042 11.0093 44.042 11.98V12.344C44.042 13.3147 44.1546 14.1293 44.38 14.788C44.6226 15.4293 44.9953 15.9147 45.498 16.244C46.018 16.556 46.694 16.712 47.526 16.712ZM60.491 19.312C60.1097 19.312 59.6677 19.26 59.165 19.156C58.6797 19.0693 58.203 18.896 57.735 18.636C57.2843 18.376 56.9117 17.9947 56.617 17.492C56.3223 16.972 56.175 16.296 56.175 15.464C56.175 14.528 56.383 13.7567 56.799 13.15C57.215 12.526 57.7957 12.0407 58.541 11.694C59.3037 11.33 60.205 11.0787 61.245 10.94C62.3023 10.784 63.455 10.706 64.703 10.706V9.588C64.703 9.18933 64.6423 8.834 64.521 8.522C64.3997 8.21 64.1743 7.96733 63.845 7.794C63.533 7.60333 63.0563 7.508 62.415 7.508C61.7737 7.508 61.271 7.586 60.907 7.742C60.543 7.898 60.2917 8.08867 60.153 8.314C60.0143 8.53933 59.945 8.77333 59.945 9.016V9.38H56.877C56.8597 9.29333 56.851 9.20667 56.851 9.12C56.851 9.03333 56.851 8.92933 56.851 8.808C56.851 8.028 57.085 7.352 57.553 6.78C58.021 6.208 58.671 5.77467 59.503 5.48C60.335 5.168 61.297 5.012 62.389 5.012C63.637 5.012 64.6597 5.18533 65.457 5.532C66.2717 5.87867 66.8783 6.37267 67.277 7.014C67.6757 7.65533 67.875 8.43533 67.875 9.354V15.802C67.875 16.1313 67.9703 16.3653 68.161 16.504C68.3517 16.6427 68.5597 16.712 68.785 16.712H69.617V18.896C69.4437 18.9653 69.1923 19.0433 68.863 19.13C68.5337 19.234 68.1263 19.286 67.641 19.286C67.1903 19.286 66.783 19.208 66.419 19.052C66.0723 18.9133 65.7777 18.7053 65.535 18.428C65.2923 18.1507 65.119 17.8213 65.015 17.44H64.859C64.5643 17.804 64.209 18.1333 63.793 18.428C63.3943 18.7053 62.9177 18.922 62.363 19.078C61.8257 19.234 61.2017 19.312 60.491 19.312ZM61.453 16.712C61.973 16.712 62.4323 16.634 62.831 16.478C63.247 16.322 63.585 16.1053 63.845 15.828C64.1223 15.5507 64.3303 15.2127 64.469 14.814C64.625 14.4153 64.703 13.982 64.703 13.514V12.89C63.7497 12.89 62.8657 12.9507 62.051 13.072C61.2537 13.1933 60.6123 13.4187 60.127 13.748C59.659 14.0773 59.425 14.5453 59.425 15.152C59.425 15.464 59.4943 15.7413 59.633 15.984C59.789 16.2093 60.0143 16.3913 60.309 16.53C60.621 16.6513 61.0023 16.712 61.453 16.712ZM76.1863 19.312C75.0769 19.312 74.1149 19.0607 73.3003 18.558C72.4856 18.0553 71.8529 17.2753 71.4023 16.218C70.9689 15.1607 70.7523 13.8 70.7523 12.136C70.7523 10.4893 70.9776 9.146 71.4283 8.106C71.8789 7.04867 72.5029 6.26867 73.3003 5.766C74.0976 5.26333 74.9989 5.012 76.0043 5.012C76.6283 5.012 77.2003 5.08133 77.7203 5.22C78.2403 5.35867 78.6996 5.57533 79.0983 5.87C79.4969 6.14733 79.8349 6.494 80.1123 6.91H80.2683V0.201999H83.4403V19H80.8143L80.5543 17.18H80.3723C79.9389 17.8907 79.3496 18.428 78.6043 18.792C77.8763 19.1387 77.0703 19.312 76.1863 19.312ZM77.1743 16.582C77.9023 16.582 78.4916 16.4173 78.9423 16.088C79.3929 15.7587 79.7223 15.282 79.9303 14.658C80.1556 14.034 80.2683 13.2713 80.2683 12.37V12.032C80.2683 11.356 80.2076 10.7493 80.0863 10.212C79.9649 9.67467 79.7743 9.224 79.5143 8.86C79.2716 8.496 78.9509 8.21867 78.5523 8.028C78.1709 7.83733 77.7116 7.742 77.1743 7.742C76.3943 7.742 75.7703 7.898 75.3023 8.21C74.8516 8.50467 74.5223 8.97267 74.3143 9.614C74.1236 10.238 74.0283 11.0353 74.0283 12.006V12.37C74.0283 13.3233 74.1236 14.112 74.3143 14.736C74.5223 15.36 74.8516 15.828 75.3023 16.14C75.7703 16.4347 76.3943 16.582 77.1743 16.582ZM98.1041 19.312C96.6134 19.312 95.3654 19.0607 94.3601 18.558C93.3547 18.038 92.6007 17.2493 92.0981 16.192C91.5954 15.1347 91.3441 13.7913 91.3441 12.162C91.3441 10.5153 91.5954 9.172 92.0981 8.132C92.6007 7.07467 93.3547 6.29467 94.3601 5.792C95.3654 5.272 96.6134 5.012 98.1041 5.012C99.6121 5.012 100.86 5.272 101.848 5.792C102.853 6.29467 103.607 7.07467 104.11 8.132C104.613 9.172 104.864 10.5153 104.864 12.162C104.864 13.7913 104.613 15.1347 104.11 16.192C103.607 17.2493 102.853 18.038 101.848 18.558C100.86 19.0607 99.6121 19.312 98.1041 19.312ZM98.1041 16.712C98.9361 16.712 99.6034 16.556 100.106 16.244C100.626 15.9147 100.999 15.4293 101.224 14.788C101.467 14.1293 101.588 13.3147 101.588 12.344V11.98C101.588 11.0093 101.467 10.2033 101.224 9.562C100.999 8.90333 100.626 8.418 100.106 8.106C99.6034 7.77667 98.9361 7.612 98.1041 7.612C97.2721 7.612 96.5961 7.77667 96.0761 8.106C95.5734 8.418 95.2007 8.90333 94.9581 9.562C94.7327 10.2033 94.6201 11.0093 94.6201 11.98V12.344C94.6201 13.3147 94.7327 14.1293 94.9581 14.788C95.2007 15.4293 95.5734 15.9147 96.0761 16.244C96.5961 16.556 97.2721 16.712 98.1041 16.712ZM107.559 19V5.324H110.211L110.471 7.482H110.653C110.826 7.04867 111.034 6.65 111.277 6.286C111.537 5.90467 111.866 5.60133 112.265 5.376C112.664 5.13333 113.149 5.012 113.721 5.012C113.998 5.012 114.25 5.038 114.475 5.09C114.718 5.142 114.9 5.194 115.021 5.246V8.236H114.059C113.522 8.236 113.045 8.314 112.629 8.47C112.213 8.60867 111.858 8.834 111.563 9.146C111.286 9.458 111.078 9.848 110.939 10.316C110.8 10.784 110.731 11.33 110.731 11.954V19H107.559ZM126.434 19.312C125.325 19.312 124.363 19.0607 123.548 18.558C122.734 18.0553 122.101 17.2753 121.65 16.218C121.217 15.1607 121 13.8 121 12.136C121 10.4893 121.226 9.146 121.676 8.106C122.127 7.04867 122.751 6.26867 123.548 5.766C124.346 5.26333 125.247 5.012 126.252 5.012C126.876 5.012 127.448 5.08133 127.968 5.22C128.488 5.35867 128.948 5.57533 129.346 5.87C129.745 6.14733 130.083 6.494 130.36 6.91H130.516V0.201999H133.688V19H131.062L130.802 17.18H130.62C130.187 17.8907 129.598 18.428 128.852 18.792C128.124 19.1387 127.318 19.312 126.434 19.312ZM127.422 16.582C128.15 16.582 128.74 16.4173 129.19 16.088C129.641 15.7587 129.97 15.282 130.178 14.658C130.404 14.034 130.516 13.2713 130.516 12.37V12.032C130.516 11.356 130.456 10.7493 130.334 10.212C130.213 9.67467 130.022 9.224 129.762 8.86C129.52 8.496 129.199 8.21867 128.8 8.028C128.419 7.83733 127.96 7.742 127.422 7.742C126.642 7.742 126.018 7.898 125.55 8.21C125.1 8.50467 124.77 8.97267 124.562 9.614C124.372 10.238 124.276 11.0353 124.276 12.006V12.37C124.276 13.3233 124.372 14.112 124.562 14.736C124.77 15.36 125.1 15.828 125.55 16.14C126.018 16.4347 126.642 16.582 127.422 16.582ZM137.063 19V5.324H139.715L139.975 7.482H140.157C140.33 7.04867 140.538 6.65 140.781 6.286C141.041 5.90467 141.37 5.60133 141.769 5.376C142.168 5.13333 142.653 5.012 143.225 5.012C143.502 5.012 143.754 5.038 143.979 5.09C144.222 5.142 144.404 5.194 144.525 5.246V8.236H143.563C143.026 8.236 142.549 8.314 142.133 8.47C141.717 8.60867 141.362 8.834 141.067 9.146C140.79 9.458 140.582 9.848 140.443 10.316C140.304 10.784 140.235 11.33 140.235 11.954V19H137.063ZM149.739 19.312C149.358 19.312 148.916 19.26 148.413 19.156C147.928 19.0693 147.451 18.896 146.983 18.636C146.532 18.376 146.16 17.9947 145.865 17.492C145.57 16.972 145.423 16.296 145.423 15.464C145.423 14.528 145.631 13.7567 146.047 13.15C146.463 12.526 147.044 12.0407 147.789 11.694C148.552 11.33 149.453 11.0787 150.493 10.94C151.55 10.784 152.703 10.706 153.951 10.706V9.588C153.951 9.18933 153.89 8.834 153.769 8.522C153.648 8.21 153.422 7.96733 153.093 7.794C152.781 7.60333 152.304 7.508 151.663 7.508C151.022 7.508 150.519 7.586 150.155 7.742C149.791 7.898 149.54 8.08867 149.401 8.314C149.262 8.53933 149.193 8.77333 149.193 9.016V9.38H146.125C146.108 9.29333 146.099 9.20667 146.099 9.12C146.099 9.03333 146.099 8.92933 146.099 8.808C146.099 8.028 146.333 7.352 146.801 6.78C147.269 6.208 147.919 5.77467 148.751 5.48C149.583 5.168 150.545 5.012 151.637 5.012C152.885 5.012 153.908 5.18533 154.705 5.532C155.52 5.87867 156.126 6.37267 156.525 7.014C156.924 7.65533 157.123 8.43533 157.123 9.354V15.802C157.123 16.1313 157.218 16.3653 157.409 16.504C157.6 16.6427 157.808 16.712 158.033 16.712H158.865V18.896C158.692 18.9653 158.44 19.0433 158.111 19.13C157.782 19.234 157.374 19.286 156.889 19.286C156.438 19.286 156.031 19.208 155.667 19.052C155.32 18.9133 155.026 18.7053 154.783 18.428C154.54 18.1507 154.367 17.8213 154.263 17.44H154.107C153.812 17.804 153.457 18.1333 153.041 18.428C152.642 18.7053 152.166 18.922 151.611 19.078C151.074 19.234 150.45 19.312 149.739 19.312ZM150.701 16.712C151.221 16.712 151.68 16.634 152.079 16.478C152.495 16.322 152.833 16.1053 153.093 15.828C153.37 15.5507 153.578 15.2127 153.717 14.814C153.873 14.4153 153.951 13.982 153.951 13.514V12.89C152.998 12.89 152.114 12.9507 151.299 13.072C150.502 13.1933 149.86 13.4187 149.375 13.748C148.907 14.0773 148.673 14.5453 148.673 15.152C148.673 15.464 148.742 15.7413 148.881 15.984C149.037 16.2093 149.262 16.3913 149.557 16.53C149.869 16.6513 150.25 16.712 150.701 16.712ZM162.938 23.732C162.332 23.732 161.76 23.6107 161.222 23.368C160.685 23.1253 160.252 22.7613 159.922 22.276C159.593 21.808 159.428 21.2273 159.428 20.534C159.428 19.7713 159.645 19.1733 160.078 18.74C160.529 18.2893 161.023 17.9513 161.56 17.726C161.162 17.518 160.832 17.2407 160.572 16.894C160.33 16.5473 160.208 16.1313 160.208 15.646C160.208 14.9873 160.451 14.4673 160.936 14.086C161.422 13.6873 161.976 13.4273 162.6 13.306C161.959 12.9073 161.465 12.396 161.118 11.772C160.789 11.148 160.624 10.4373 160.624 9.64C160.624 8.68667 160.85 7.872 161.3 7.196C161.768 6.50267 162.444 5.96533 163.328 5.584C164.212 5.20267 165.278 5.012 166.526 5.012C167.029 5.012 167.514 5.04667 167.982 5.116C168.45 5.18533 168.875 5.28933 169.256 5.428C169.863 5.064 170.279 4.65667 170.504 4.206C170.73 3.738 170.851 3.35667 170.868 3.062H173.962C173.962 3.66867 173.841 4.206 173.598 4.674C173.373 5.142 173.052 5.532 172.636 5.844C172.22 6.13867 171.718 6.35533 171.128 6.494C171.562 6.87533 171.891 7.33467 172.116 7.872C172.342 8.40933 172.454 8.99867 172.454 9.64C172.454 10.5933 172.229 11.4167 171.778 12.11C171.345 12.8033 170.695 13.3407 169.828 13.722C168.979 14.1033 167.93 14.294 166.682 14.294H164.576C164.212 14.294 163.926 14.372 163.718 14.528C163.528 14.684 163.432 14.9007 163.432 15.178C163.432 15.4033 163.519 15.6027 163.692 15.776C163.883 15.9493 164.143 16.036 164.472 16.036H170.452C171.475 16.036 172.316 16.374 172.974 17.05C173.65 17.7087 173.988 18.558 173.988 19.598C173.988 20.378 173.78 21.08 173.364 21.704C172.966 22.328 172.402 22.822 171.674 23.186C170.946 23.55 170.097 23.732 169.126 23.732H162.938ZM164.082 21.444H169.1C169.43 21.444 169.716 21.3833 169.958 21.262C170.218 21.158 170.418 21.002 170.556 20.794C170.712 20.586 170.79 20.352 170.79 20.092C170.79 19.6413 170.643 19.3033 170.348 19.078C170.071 18.8527 169.724 18.74 169.308 18.74H164.082C163.666 18.74 163.32 18.8613 163.042 19.104C162.765 19.364 162.626 19.6933 162.626 20.092C162.626 20.4907 162.756 20.8113 163.016 21.054C163.294 21.314 163.649 21.444 164.082 21.444ZM166.552 12.058C167.471 12.058 168.156 11.85 168.606 11.434C169.074 11.0007 169.308 10.4027 169.308 9.64C169.308 8.87733 169.074 8.288 168.606 7.872C168.156 7.456 167.471 7.248 166.552 7.248C165.634 7.248 164.94 7.456 164.472 7.872C164.022 8.288 163.796 8.87733 163.796 9.64C163.796 10.1427 163.892 10.576 164.082 10.94C164.29 11.304 164.594 11.5813 164.992 11.772C165.408 11.9627 165.928 12.058 166.552 12.058ZM188.029 19.312C186.642 19.312 185.411 19.1127 184.337 18.714C183.279 18.298 182.447 17.7087 181.841 16.946C181.234 16.1833 180.931 15.2733 180.931 14.216C180.931 12.9853 181.26 12.0233 181.919 11.33C182.595 10.6193 183.435 10.1253 184.441 9.848V9.744C183.557 9.36267 182.82 8.87733 182.231 8.288C181.641 7.69867 181.347 6.84933 181.347 5.74C181.347 4.68267 181.633 3.79 182.205 3.062C182.794 2.334 183.609 1.788 184.649 1.424C185.706 1.04267 186.928 0.852 188.315 0.852C189.649 0.852 190.819 1.05133 191.825 1.45C192.83 1.84867 193.619 2.42067 194.191 3.166C194.763 3.894 195.049 4.752 195.049 5.74V6.39H191.877V5.974C191.877 5.402 191.729 4.934 191.435 4.57C191.157 4.18867 190.75 3.91133 190.213 3.738C189.675 3.54733 189.025 3.452 188.263 3.452C187.691 3.452 187.171 3.51267 186.703 3.634C186.252 3.738 185.871 3.90267 185.559 4.128C185.247 4.35333 185.004 4.63067 184.831 4.96C184.675 5.28933 184.597 5.67067 184.597 6.104C184.597 6.65867 184.735 7.12667 185.013 7.508C185.307 7.88933 185.689 8.17533 186.157 8.366C186.625 8.55667 187.127 8.652 187.665 8.652H189.407V11.252H187.743C187.136 11.252 186.555 11.33 186.001 11.486C185.463 11.6247 185.03 11.8847 184.701 12.266C184.371 12.6473 184.207 13.202 184.207 13.93C184.207 14.5713 184.363 15.1 184.675 15.516C184.987 15.9147 185.429 16.218 186.001 16.426C186.59 16.6167 187.292 16.712 188.107 16.712C188.956 16.712 189.658 16.608 190.213 16.4C190.767 16.1747 191.183 15.8453 191.461 15.412C191.738 14.9787 191.877 14.4587 191.877 13.852V8.652H197.441V11.252H195.049V13.774C195.049 14.8833 194.78 15.854 194.243 16.686C193.723 17.518 192.943 18.168 191.903 18.636C190.863 19.0867 189.571 19.312 188.029 19.312ZM210.147 19.312C209.038 19.312 208.076 19.0607 207.261 18.558C206.447 18.0553 205.814 17.2753 205.363 16.218C204.93 15.1607 204.713 13.8 204.713 12.136C204.713 10.4893 204.939 9.146 205.389 8.106C205.84 7.04867 206.464 6.26867 207.261 5.766C208.059 5.26333 208.96 5.012 209.965 5.012C210.589 5.012 211.161 5.08133 211.681 5.22C212.201 5.35867 212.661 5.57533 213.059 5.87C213.458 6.14733 213.796 6.494 214.073 6.91H214.229V0.201999H217.401V19H214.775L214.515 17.18H214.333C213.9 17.8907 213.311 18.428 212.565 18.792C211.837 19.1387 211.031 19.312 210.147 19.312ZM211.135 16.582C211.863 16.582 212.453 16.4173 212.903 16.088C213.354 15.7587 213.683 15.282 213.891 14.658C214.117 14.034 214.229 13.2713 214.229 12.37V12.032C214.229 11.356 214.169 10.7493 214.047 10.212C213.926 9.67467 213.735 9.224 213.475 8.86C213.233 8.496 212.912 8.21867 212.513 8.028C212.132 7.83733 211.673 7.742 211.135 7.742C210.355 7.742 209.731 7.898 209.263 8.21C208.813 8.50467 208.483 8.97267 208.275 9.614C208.085 10.238 207.989 11.0353 207.989 12.006V12.37C207.989 13.3233 208.085 14.112 208.275 14.736C208.483 15.36 208.813 15.828 209.263 16.14C209.731 16.4347 210.355 16.582 211.135 16.582ZM220.776 19V5.324H223.428L223.688 7.482H223.87C224.043 7.04867 224.251 6.65 224.494 6.286C224.754 5.90467 225.083 5.60133 225.482 5.376C225.881 5.13333 226.366 5.012 226.938 5.012C227.215 5.012 227.467 5.038 227.692 5.09C227.935 5.142 228.117 5.194 228.238 5.246V8.236H227.276C226.739 8.236 226.262 8.314 225.846 8.47C225.43 8.60867 225.075 8.834 224.78 9.146C224.503 9.458 224.295 9.848 224.156 10.316C224.017 10.784 223.948 11.33 223.948 11.954V19H220.776ZM236.026 19.312C234.535 19.312 233.287 19.0607 232.282 18.558C231.277 18.038 230.523 17.2493 230.02 16.192C229.517 15.1347 229.266 13.7913 229.266 12.162C229.266 10.5153 229.517 9.172 230.02 8.132C230.523 7.07467 231.277 6.29467 232.282 5.792C233.287 5.272 234.535 5.012 236.026 5.012C237.534 5.012 238.782 5.272 239.77 5.792C240.775 6.29467 241.529 7.07467 242.032 8.132C242.535 9.172 242.786 10.5153 242.786 12.162C242.786 13.7913 242.535 15.1347 242.032 16.192C241.529 17.2493 240.775 18.038 239.77 18.558C238.782 19.0607 237.534 19.312 236.026 19.312ZM236.026 16.712C236.858 16.712 237.525 16.556 238.028 16.244C238.548 15.9147 238.921 15.4293 239.146 14.788C239.389 14.1293 239.51 13.3147 239.51 12.344V11.98C239.51 11.0093 239.389 10.2033 239.146 9.562C238.921 8.90333 238.548 8.418 238.028 8.106C237.525 7.77667 236.858 7.612 236.026 7.612C235.194 7.612 234.518 7.77667 233.998 8.106C233.495 8.418 233.123 8.90333 232.88 9.562C232.655 10.2033 232.542 11.0093 232.542 11.98V12.344C232.542 13.3147 232.655 14.1293 232.88 14.788C233.123 15.4293 233.495 15.9147 233.998 16.244C234.518 16.556 235.194 16.712 236.026 16.712ZM245.481 23.498V5.324H248.107L248.367 7.144H248.549C249 6.43333 249.589 5.90467 250.317 5.558C251.045 5.194 251.851 5.012 252.735 5.012C253.862 5.012 254.824 5.26333 255.621 5.766C256.436 6.26867 257.06 7.04867 257.493 8.106C257.944 9.16333 258.169 10.524 258.169 12.188C258.169 13.8173 257.944 15.1607 257.493 16.218C257.042 17.2753 256.418 18.0553 255.621 18.558C254.841 19.0607 253.94 19.312 252.917 19.312C252.293 19.312 251.721 19.2427 251.201 19.104C250.681 18.9653 250.222 18.7573 249.823 18.48C249.424 18.1853 249.086 17.83 248.809 17.414H248.653V23.498H245.481ZM251.747 16.582C252.527 16.582 253.142 16.4347 253.593 16.14C254.061 15.828 254.39 15.36 254.581 14.736C254.789 14.112 254.893 13.3233 254.893 12.37V12.006C254.893 11.0353 254.789 10.238 254.581 9.614C254.39 8.97267 254.061 8.50467 253.593 8.21C253.142 7.898 252.527 7.742 251.747 7.742C251.036 7.742 250.447 7.90667 249.979 8.236C249.528 8.56533 249.19 9.05067 248.965 9.692C248.757 10.316 248.653 11.0873 248.653 12.006V12.318C248.653 12.994 248.714 13.6007 248.835 14.138C248.956 14.658 249.138 15.1 249.381 15.464C249.641 15.828 249.962 16.1053 250.343 16.296C250.742 16.4867 251.21 16.582 251.747 16.582ZM266.723 19V7.924H264.747V5.324H266.723V3.582C266.723 2.97533 266.818 2.40333 267.009 1.866C267.217 1.31133 267.572 0.860666 268.075 0.513999C268.577 0.167333 269.279 -0.00600016 270.181 -0.00600016C270.441 -0.00600016 270.701 0.0113329 270.961 0.0459992C271.238 0.0806654 271.498 0.132665 271.741 0.201999C271.983 0.253999 272.191 0.314666 272.365 0.383999V2.594H271.065C270.683 2.594 270.389 2.698 270.181 2.906C269.99 3.09667 269.895 3.38267 269.895 3.764V5.324H272.365V7.924H269.895V19H266.723ZM274.045 3.218V0.201999H277.217V3.218H274.045ZM274.045 19V5.324H277.217V19H274.045ZM280.596 19V0.201999H283.768V19H280.596ZM293.023 19.312C291.567 19.312 290.354 19.0607 289.383 18.558C288.412 18.038 287.684 17.2493 287.199 16.192C286.714 15.1347 286.471 13.7913 286.471 12.162C286.471 10.5153 286.714 9.172 287.199 8.132C287.684 7.07467 288.412 6.29467 289.383 5.792C290.354 5.272 291.567 5.012 293.023 5.012C294.34 5.012 295.441 5.26333 296.325 5.766C297.226 6.25133 297.902 7.00533 298.353 8.028C298.804 9.05067 299.029 10.3767 299.029 12.006V12.942H289.721C289.756 13.7913 289.886 14.5107 290.111 15.1C290.336 15.672 290.683 16.1053 291.151 16.4C291.636 16.6773 292.269 16.816 293.049 16.816C293.448 16.816 293.82 16.764 294.167 16.66C294.514 16.556 294.817 16.4 295.077 16.192C295.337 15.9667 295.536 15.6893 295.675 15.36C295.831 15.0307 295.909 14.6493 295.909 14.216H299.029C299.029 15.0827 298.873 15.8367 298.561 16.478C298.266 17.1193 297.842 17.648 297.287 18.064C296.75 18.48 296.117 18.792 295.389 19C294.661 19.208 293.872 19.312 293.023 19.312ZM289.773 10.706H295.727C295.727 10.134 295.658 9.64867 295.519 9.25C295.398 8.85133 295.216 8.522 294.973 8.262C294.748 8.002 294.47 7.82 294.141 7.716C293.812 7.59467 293.439 7.534 293.023 7.534C292.347 7.534 291.775 7.64667 291.307 7.872C290.856 8.09733 290.51 8.444 290.267 8.912C290.024 9.38 289.86 9.978 289.773 10.706ZM307.051 19.312C306.063 19.312 305.197 19.208 304.451 19C303.706 18.7747 303.082 18.4713 302.579 18.09C302.077 17.7087 301.695 17.2667 301.435 16.764C301.193 16.244 301.071 15.6807 301.071 15.074C301.071 14.9873 301.071 14.9093 301.071 14.84C301.089 14.7707 301.097 14.7187 301.097 14.684H304.217C304.217 14.7187 304.217 14.7533 304.217 14.788C304.217 14.8227 304.217 14.8573 304.217 14.892C304.235 15.36 304.382 15.7413 304.659 16.036C304.937 16.3133 305.301 16.5127 305.751 16.634C306.202 16.7553 306.679 16.816 307.181 16.816C307.632 16.816 308.057 16.7727 308.455 16.686C308.871 16.582 309.209 16.426 309.469 16.218C309.747 15.9927 309.885 15.7067 309.885 15.36C309.885 14.9093 309.712 14.5627 309.365 14.32C309.019 14.0773 308.559 13.878 307.987 13.722C307.433 13.566 306.835 13.4013 306.193 13.228C305.621 13.072 305.049 12.8987 304.477 12.708C303.905 12.5173 303.385 12.2747 302.917 11.98C302.467 11.6853 302.094 11.304 301.799 10.836C301.522 10.368 301.383 9.78733 301.383 9.094C301.383 8.418 301.531 7.82867 301.825 7.326C302.12 6.82333 302.527 6.40733 303.047 6.078C303.567 5.73133 304.183 5.47133 304.893 5.298C305.604 5.12467 306.375 5.038 307.207 5.038C308.022 5.038 308.759 5.12467 309.417 5.298C310.093 5.47133 310.674 5.72267 311.159 6.052C311.662 6.364 312.043 6.754 312.303 7.222C312.581 7.67267 312.719 8.17533 312.719 8.73C312.719 8.85133 312.711 8.97267 312.693 9.094C312.693 9.21533 312.693 9.28467 312.693 9.302H309.599V9.12C309.599 8.79067 309.495 8.51333 309.287 8.288C309.097 8.04533 308.811 7.85467 308.429 7.716C308.065 7.57733 307.606 7.508 307.051 7.508C306.635 7.508 306.271 7.54267 305.959 7.612C305.647 7.68133 305.387 7.77667 305.179 7.898C304.989 8.01933 304.841 8.158 304.737 8.314C304.633 8.47 304.581 8.64333 304.581 8.834C304.581 9.16333 304.711 9.42333 304.971 9.614C305.231 9.80467 305.578 9.96933 306.011 10.108C306.462 10.2467 306.947 10.394 307.467 10.55C308.091 10.7233 308.733 10.9053 309.391 11.096C310.05 11.2693 310.657 11.4947 311.211 11.772C311.783 12.0493 312.243 12.4393 312.589 12.942C312.936 13.4447 313.109 14.112 313.109 14.944C313.109 15.7413 312.953 16.426 312.641 16.998C312.347 17.5527 311.922 18.0033 311.367 18.35C310.83 18.6793 310.189 18.922 309.443 19.078C308.715 19.234 307.918 19.312 307.051 19.312Z" fill="black" />
+                    </svg>
+                </p>
+
+                <p className="text-xs text-gray-500 mt-[-5px]">
+                    PDF, DOCX (max 10MB)
                 </p>
 
                 <button
-                    className="mt-1 text-sm font-medium text-white bg-gradient-to-br from-[var(--primary)] to-blue-600 hover:bg-blue-700 px-3 py-1 rounded shadow-xs transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-blue-400 cursor-pointer"
+                    className="text-xs mt-4 mb-6 text-white  bg-[var(--dashBoardStartNowBtn)] px-8 py-2 rounded shadow-xs transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-blue-400 cursor-pointer"
                 >
-                    Start Now
+                    Upload File
                 </button>
 
-                <p className="text-[0.65rem] text-gray-400 mt-0.5">
-                    PDF, JPG, PNG (max. 10MB)
-                </p>
 
                 <input
                     type="file"
diff --git a/src/components/home/StartSection.tsx b/src/components/home/StartSection.tsx
index 381dc54..2fc7d2a 100644
--- a/src/components/home/StartSection.tsx
+++ b/src/components/home/StartSection.tsx
@@ -115,7 +115,7 @@ const StartSection = () => {
 
     return (
         <section className="px-3 py-2 w-full mt-2">
-            <h2 className="text-sm font-semibold text-gray-800 px-1 pb-2">
+            <h2 className="text-lg font-bold text-gray-800 px-1 pb-3">
                 Upload Document
             </h2>
 
diff --git a/src/components/home/TransactionChoiceModal.tsx b/src/components/home/TransactionChoiceModal.tsx
new file mode 100644
index 0000000..aaf28ea
--- /dev/null
+++ b/src/components/home/TransactionChoiceModal.tsx
@@ -0,0 +1,65 @@
+import { FiX, FiCheckCircle, FiGrid, FiLayers } from "react-icons/fi";
+
+interface TransactionChoiceModalProps {
+  open: boolean;
+  onClose: () => void;
+  onCreateTransaction: () => void;
+  onCreateSeparateTransactions: () => void;
+}
+
+export default function TransactionChoiceModal({ open, onClose, onCreateTransaction, onCreateSeparateTransactions }: TransactionChoiceModalProps) {
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 justify-center z-50">
+        <div className="w-full h-full bg-gray-200 absolute top-0 left-0 opacity-55"></div>
+
+      <div className="bg-white rounded-lg shadow-lg w-[320px] sm:w-[620px] p-5  relative top-[40%] translate-y-[-40%] left-[50%] translate-x-[-50%]">
+        {/* Close button */}
+        <button
+          onClick={onClose}
+          className="absolute top-3 right-3 text-gray-500 hover:text-gray-700"
+        >
+          <FiX size={20} />
+        </button>
+
+        {/* Header */}
+        <div className="flex items-center gap-2 mb-4">
+          <FiCheckCircle className="text-green-500" size={22} />
+          <div>
+            <h2 className="text-lg font-semibold">Create Transaction</h2>
+          </div>
+        </div>
+
+        {/* Options */}
+        <div className="flex flex-col wm sm:flex-row justify-center items-center gap-4 mt-6">
+          {/* Create Transaction (combine) */}
+          <button
+            onClick={onCreateTransaction}
+            className="w-[200px] sm:w-auto flex flex-col items-center justify-center border-1 border-dashed border-gray-200 cursor-pointer rounded-lg px-5 py-8 hover:bg-blue-50 transition shadow"
+          >
+            <FiLayers className="text-[var(--mainPrimaryBtn)] mb-2" size={28} />
+            <span className="font-medium text-[var(--mainPrimaryBtn)]">Create Transaction</span>
+            <span className="text-xs text-gray-500 mt-1 text-center">
+              All documents combined into a single transaction
+            </span>
+          </button>
+
+          {/* Create Separate Transactions */}
+          <button
+            onClick={onCreateSeparateTransactions}
+            className="w-[200px] sm:w-auto flex flex-col items-center justify-center border-1 border-dashed border-gray-200 cursor-pointer rounded-lg px-5 py-8 hover:bg-blue-50 transition shadow"
+          >
+            <FiGrid className="text-[var(--mainPrimaryBtn)] mb-2" size={28} />
+            <span className="font-medium text-[var(--mainPrimaryBtn)]">
+              Create Separate Transactions
+            </span>
+            <span className="text-xs text-gray-500 mt-1 text-center">
+              Each document will be its own transaction
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/home/UploadDoc.tsx b/src/components/home/UploadDoc.tsx
index 9eb80c8..75e1125 100644
--- a/src/components/home/UploadDoc.tsx
+++ b/src/components/home/UploadDoc.tsx
@@ -3,11 +3,8 @@ import { useDispatch } from "react-redux";
 import { AppDispatch } from "../../store/store";
 
 import { FaCloudUploadAlt } from "react-icons/fa";
-import { MdCancel } from "react-icons/md";
 import { uploadDocuments } from "../../store/slices/documentSlice";
 
-import { Bounce, toast } from "react-toastify";
-
 const UploadDoc: React.FC = () => {
     const [files, setFiles] = useState<File[]>([]);
     const dispatch = useDispatch<AppDispatch>();
diff --git a/src/components/process/CompletionScreen/TransactionSentSuccess.tsx b/src/components/process/CompletionScreen/TransactionSentSuccess.tsx
index 03c3c55..319fe83 100644
--- a/src/components/process/CompletionScreen/TransactionSentSuccess.tsx
+++ b/src/components/process/CompletionScreen/TransactionSentSuccess.tsx
@@ -9,145 +9,147 @@ import { fetchRecipients, recipientType } from '../../../store/slices/selectedRe
 import { fetchDocuments } from '../../../store/slices/documentSlice'
 import { SigningOrderDiagram } from './SigningOrderDiagram'
 import { SignersList } from './SignerList'
-import { IoCheckmarkDoneCircle } from 'react-icons/io5'
 
 const TransactionSentSuccess = () => {
-    const [isVisible, setIsVisible] = useState(false);
-    const [isSignNow, setIsSignNow] = useState(false);
+  const [isVisible, setIsVisible] = useState(false)
+  const dispatch = useDispatch<AppDispatch>()
 
-    const dispatch = useDispatch<AppDispatch>();
+  const { accountId, transactionId } = useParams<{ accountId: string; transactionId: string }>()
+  const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients)
+  const userDetails = useSelector((state: RootState) => state.user)
+  const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
 
-    const { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
-    const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients);
-    const userDetails = useSelector((state: RootState) => state.user);
-    const [selfUserSign, setSelfUserSign] = useState({ sign: false, recipientId: 0 });
+  const [selfUserSign, setSelfUserSign] = useState({ sign: false, recipientId: 0 })
 
-    if (!accountId || !transactionId) {
-        window.location.href = "/";
-        return null;
+  if (!accountId || !transactionId) {
+    window.location.href = '/'
+    return null
+  }
+
+  useEffect(() => {
+    selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }))
+    selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }))
+    setIsVisible(true)
+  }, [])
+
+  useEffect(() => {
+    if (selectedRecipients.length === 0) return
+
+    let minRoutingOrder: number = Infinity
+    let userEmailPresent = {
+      present: false,
+      routingOrder: 0,
+      recipientId: 0,
+      type: recipientType.CC,
     }
-    // const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments)
-    const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
-    // const [transactionData, setTransactionData] = useState({})
 
+    for (let i = 0; i < selectedRecipients.length; i++) {
+      const recipient = selectedRecipients[i]
+      if (recipient.routingOrder < minRoutingOrder) {
+        minRoutingOrder = recipient.routingOrder
+      }
 
-    useEffect(() => {
-        selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }));
-        selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
-        setIsVisible(true)
-    }, [])
+      if (recipient.email === userDetails.email) {
+        userEmailPresent.present = true
+        userEmailPresent.routingOrder = recipient.routingOrder
+        userEmailPresent.recipientId = Number(recipient.id)
+        userEmailPresent.type = recipient.type
+      }
+    }
 
+    if (
+      userEmailPresent.present &&
+      userEmailPresent.routingOrder === minRoutingOrder &&
+      userEmailPresent.type !== recipientType.CC &&
+      userEmailPresent.type !== recipientType.INPERSONSIGNER
+    ) {
+      setSelfUserSign({ sign: true, recipientId: userEmailPresent.recipientId })
+    }
+  }, [selectedRecipients])
 
-    useEffect(() => {
-        if (selectedRecipients.length === 0) return;
-
-        let minRoutingOrder: number = Infinity;
-        let userEmailPresent = {
-            present: false,
-            routingOrder: 0,
-            recipientId: 0,
-            type: recipientType.CC
-        };
-        // Getting Minimum RoutingOrder
-        for (let i = 0; i < selectedRecipients.length; i++) {
-            const recipient = selectedRecipients[i]
-            if (recipient.routingOrder < minRoutingOrder) {
-                minRoutingOrder = recipient.routingOrder;
-            }
-
-            if (recipient.email === userDetails.email) {
-                userEmailPresent.present = true;
-                userEmailPresent.routingOrder = recipient.routingOrder;
-                userEmailPresent.recipientId = Number(recipient.id);
-                userEmailPresent.type = recipient.type;
-            }
-        }
-
-        if (userEmailPresent.present && userEmailPresent.routingOrder === minRoutingOrder && userEmailPresent.type !== recipientType.CC && userEmailPresent.type !== recipientType.INPERSONSIGNER) {
-            setSelfUserSign({ sign: true, recipientId: userEmailPresent.recipientId })
-        }
-
-    }, [selectedRecipients])
-
-    return (
-        <>
-            <div className='w-full'>
-
-                <div className="flex items-center space-x-4 bg-white w-full py-2 px-5 shadow">
-                    <Link to={'/'} className="flex items-center space-x-2 text-gray-600 hover:text-[var(--primary)] transition-colors duration-200 group">
-                        <IoMdHome
-                            className='text-2xl text-slate-500 cursor-pointer hover:text-[var(--primary)] transition'
-                        />
-                    </Link>
-                    <div className="h-8 w-px bg-gray-300"></div>
-                    <h1 className="text-md text-gray-800">🎉 Awesome! The document’s been sent for signature. 🎉</h1>
-                </div>
-
-
-                <div className='flex flex-col p-4 justify-center items-center w-full'>
-
-                    <div className='mx-auto max-w-max'>
-                        <div className='flex items-center gap-4 mb-3 ml-0 bg-slate-100 p-4 rounded-md'>
-                            <div className="w-12 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-2xl" />
-                            </div>
-                            <div>
-                                <p className='text-2xl font-medium text-[var(--primary)]'>Your Document is send for signature</p>
-                                <p className='text-sm text-slate-600'>All signers will be notified via email</p>
-                            </div>
-                        </div>
-
-                        <div className='flex gap-4'>
-                            <div className='pb-4 bg-slate-100'>
-                                <div className='w-full overflow-auto h-[calc(100vh-200px)]'>
-                                    <div className='py-2 bg-white pl-4 pr-4 shadow-sm rounded-sm border-1 border-slate-200 sticky top-0 w-full z-1'>
-                                        <p className='text-sm font-medium'>QuickPreview</p>
-                                    </div>
-                                    {/* <NavTwo isPreview={true} aId={accountId} tId={transactionId} /> */}
-                                    <div className='pl-4 pr-4'>
-                                        <DocumentContainer isPreview={true} aId={accountId} tId={transactionId} />
-                                    </div>
-                                </div>
-                            </div>
-
-
-                            {/* Right Side */}
-                            <div className={`transition-all rounded-lg duration-700 ${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'}`}>
-
-                                {/* <div className="text-center pt-1 max-h-[25vh]">
-                                    <div className="w-20 h-20 bg-gradient-to-br from-teal-500 to-green-400 rounded-full flex items-center justify-center mt-3 mx-auto shadow-lg ">
-                                        <FaCheck className="text-white text-4xl" />
-                                    </div>
-                                </div> */}
-
-                                {/* <div className='text-center py-1'>
-                                    <h3 className="text-2xl font-bold text-gray-800 mb-2">Document Send Successfully!</h3>
-                                </div> */}
-                                <div className='max-h-[30vh]'>
-                                    <SignersList signers={selectedRecipients} />
-                                </div>
-
-                                <div className='mt-4 flex flex-col gap-2'>
-                                    {selfUserSign.sign && <Link to={`/sign/${selfUserSign.recipientId}`} className={`p-2 text-center rounded-md bg-[var(--primary)] text-white hover:shadow-sm transition-all duration-150`}>Sign Now</Link>}
-                                    <Link to={"/"} className={`p-2 text-center rounded-md bg-slate-200 hover:shadow-sm transition-all duration-150`}>Home</Link>
-                                </div>
-
-                                {/* <div className='border border-b border-gray-50'></div> */}
-                                {/* <div className='min-h-[30vh]'>
-                                    <SigningOrderDiagram signers={selectedRecipients} />
-                                </div> */}
-                                {/* <div className='border border-b border-gray-50'></div> */}
-
-                            </div>
-                        </div>
-
-                    </div>
-                </div>
-
+  return (
+    <div className="w-full">
+      {/* Header */}
+      <div className="flex items-center space-x-3 bg-white w-full py-2 px-4 sm:px-5 shadow">
+        <Link
+          to={'/'}
+          className="flex items-center text-gray-600 hover:text-[var(--primary)] transition-colors duration-200"
+        >
+          <IoMdHome className="text-xl sm:text-2xl text-slate-500 cursor-pointer" />
+        </Link>
+        <div className="h-6 sm:h-8 w-px bg-gray-300"></div>
+        <h1 className="text-sm sm:text-md text-gray-800">
+          🎉 Awesome! The document’s been sent for signature. 🎉
+        </h1>
+      </div>
 
+      {/* Content */}
+      <div className="flex flex-col p-4 justify-center items-center w-full">
+        <div className="mx-auto w-full max-w-6xl">
+          {/* Success banner */}
+          <div className="flex items-center gap-3 mb-4 bg-slate-100 p-4 rounded-md">
+            <div className="w-12 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-2xl" />
             </div>
-        </>
-    )
+            <div>
+              <p className="text-lg sm:text-2xl font-medium text-[var(--primary)]">
+                Your Document is sent for signature
+              </p>
+              <p className="text-sm text-slate-600">All signers will be notified via email</p>
+            </div>
+          </div>
+
+          {/* Main two-column layout */}
+          <div className="flex flex-col lg:flex-row gap-4">
+            {/* Left: Document Preview */}
+            <div className="flex-1 bg-slate-100 rounded-md overflow-hidden">
+              <div className="w-full h-[60vh] lg:h-[calc(100vh-200px)] overflow-auto">
+                <div className="py-2 bg-white px-4 shadow-sm rounded-sm sticky top-0 z-10">
+                  <p className="text-sm font-medium">Quick Preview</p>
+                </div>
+                <div className="px-4">
+                  <DocumentContainer isPreview={true} aId={accountId} tId={transactionId} />
+                </div>
+              </div>
+            </div>
+
+            {/* Right: Signers list + actions */}
+            <div
+              className={`flex-1 transition-all rounded-lg duration-700 ${
+                isVisible ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'
+              }`}
+            >
+              <div className="max-h-[30vh] overflow-auto">
+                <SignersList signers={selectedRecipients} />
+              </div>
+
+              <div className="mt-4 flex flex-col sm:flex-row gap-2">
+                {selfUserSign.sign && (
+                  <Link
+                    to={`/sign/${selfUserSign.recipientId}`}
+                    className="flex-1 p-2 text-center rounded-md bg-[var(--primary)] text-white hover:shadow-sm transition-all duration-150"
+                  >
+                    Sign Now
+                  </Link>
+                )}
+                <Link
+                  to="/"
+                  className="flex-1 p-2 text-center rounded-md bg-slate-200 hover:shadow-sm transition-all duration-150"
+                >
+                  Home
+                </Link>
+              </div>
+
+              {/* Optional: Signing Order */}
+              {/* <div className="mt-4">
+                <SigningOrderDiagram signers={selectedRecipients} />
+              </div> */}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
 }
 
-export default TransactionSentSuccess
\ No newline at end of file
+export default TransactionSentSuccess
diff --git a/src/components/process/processStepOne/AdvancedOptions.tsx b/src/components/process/processStepOne/AdvancedOptions.tsx
index 1ccb25b..b4dbe9c 100644
--- a/src/components/process/processStepOne/AdvancedOptions.tsx
+++ b/src/components/process/processStepOne/AdvancedOptions.tsx
@@ -1,94 +1,206 @@
 import { useState } from "react";
 import { FiLock } from "react-icons/fi";
+import api from "../../../config/api";
+import { VscClose } from "react-icons/vsc";
+import { FaCaretRight } from "react-icons/fa";
 
-export default function AdvancedOptions({setShowAdvancedOptions}) {
-    const [autoReminders, setAutoReminders] = useState(false);
-    const [expireDays, setExpireDays] = useState(120);
-    const [alertDays, setAlertDays] = useState(0);
+interface TransactionDetailsCreatedByInt {
+    userId: number,
+    firstName: string,
+    lastName: string,
+    name: string,
+    email: string
+}
+
+interface TransactionDetailsReminderConfigInt {
+    reminderEnabled: boolean,
+    reminderFrequency: number,
+    reminderDelay: number,
+    expireReminder: number
+}
+
+interface TransactionDetailsInt {
+    active: boolean;
+    allowReassign: true
+    allowViewAudit: true
+    createdAt: string
+    createdBy: TransactionDetailsCreatedByInt
+    currentRoutingOrder: 0
+    enableIdStamping: boolean
+    enableMobileSigning: boolean
+    enableSignatureIdStamping: boolean
+    expireAfter: number
+    expireEnabled: boolean
+    id: number
+    lastModifiedAt: string
+    lastModifiedBy: TransactionDetailsCreatedByInt
+    reminderConfig: TransactionDetailsReminderConfigInt
+    status: string;
+}
+
+interface AdvancedOptionsProps {
+    accountId: string;
+    setShowAdvancedOptions: React.Dispatch<React.SetStateAction<boolean>>;
+    transactionDetails?: TransactionDetailsInt;
+}
+
+const AdvancedOptions: React.FC<AdvancedOptionsProps> = ({ accountId, setShowAdvancedOptions, transactionDetails }) => {
+    if (!transactionDetails || !transactionDetails.id) return null;
+
+    const [transactionFormData, setTransactionFormData] = useState<TransactionDetailsInt>(transactionDetails);
+
+
+    const handleSaveBtnClick = async () => {
+        if(!transactionDetails) return
+
+        let changes : any = {}
+        for (const [key, val] of Object.entries(transactionDetails)) {
+            if(transactionFormData[key as keyof TransactionDetailsInt] === transactionDetails[key as keyof TransactionDetailsInt]) continue
+            changes[key as keyof TransactionDetailsInt] = val
+        }
+
+        debugger
+        console.log(changes)
+
+        await api.put(`/api/accounts/${accountId}/transactions/${transactionDetails.id}`, {
+
+        })
+    }
 
     return (
         <div className="w-full h-screen bg-white flex flex-col">
             {/* Header */}
-            <div className="flex justify-between items-center border-b px-6 py-4">
-                <h2 className="text-xl font-semibold">Advanced Options</h2>
-                <button 
-                onClick={() => setShowAdvancedOptions(false)}
-                className="text-gray-500 hover:text-black">✕</button>
+            <div className="flex justify-start gap-4 items-center border-b border-gray-200">
+                {/* <button
+                    onClick={() => setShowAdvancedOptions(false)}
+                    className="text-gray-500 hover:text-black border-r-1 border-gray-200 px-4 py-3">✕</button> */}
+                <button className="px-4 py-3 border-r-1 border-gray-300">
+                    <VscClose
+                        onClick={() => setShowAdvancedOptions(false)}
+                        className='text-2xl font-thin cursor-pointer hover:text-red-500 transition self-start sm:self-auto'
+                    />
+                </button>
+                <h2 className="font-semibold text-black">Advanced Options</h2>
             </div>
 
             {/* Content */}
             <div className="flex flex-1 overflow-hidden">
                 {/* Sidebar */}
-                <div className="w-60 border-r px-6 py-4 space-y-4 text-sm font-medium text-gray-700">
+                {/* <div className="w-60 border-r px-6 py-4 space-y-4 text-sm font-medium text-gray-700">
                     <div className="cursor-pointer hover:text-black">Recipient Privileges</div>
                     <div className="cursor-pointer hover:text-black">Reminders</div>
                     <div className="cursor-pointer hover:text-black">Expiration</div>
-                </div>
+                </div> */}
 
                 {/* Main Content */}
-                <div className="flex-1 px-8 py-6 overflow-y-auto space-y-10">
+                <div className="flex-1 px-6 sm:px-34 md:px-44 py-4 overflow-y-auto space-y-10">
                     {/* Recipient Privileges */}
                     <div>
-                        <h3 className="text-lg font-semibold mb-3">Recipient Privileges</h3>
-                        <p className="text-sm text-gray-600 mb-4">Give recipients options for how they sign.</p>
+                        <h3 className="relative flex justify-start items-center text-lg font-semibold mb-3">
+                            <FaCaretRight className="absolute text-2xl left-[-25px]" />
+                            <span>
+                                Recipient Privileges
+                            </span>
+                        </h3>
+                        {/* <p className="text-sm text-gray-600 mb-2">Give recipients options for how they sign.</p> */}
                         <div className="flex flex-col gap-2">
-                            {/* <label className="flex items-center gap-2 text-gray-700">
-                                <input type="checkbox" checked readOnly className="accent-purple-600" />
-                                Recipients can sign on paper
-                            </label> */}
-                            <label className="flex items-center gap-2 text-gray-400">
-                                <input type="checkbox" disabled className="accent-purple-600" />
+                            <label className="flex items-center gap-2">
+                                <input
+                                    type="checkbox"
+                                    checked={transactionFormData.allowReassign ? true : false}
+                                    onChange={(e) => setTransactionFormData({
+                                        ...transactionFormData,
+                                        allowReassign: e.target.checked
+                                    })}
+                                    className="accent-[var(--mainPrimaryBtn)]" />
                                 Recipients can change signing responsibility or assign a delegate
                             </label>
                         </div>
-                        <FiLock className="text-gray-400 mt-2" />
+
+                        <div className="flex flex-col gap-2">
+                            <label className="flex items-center gap-2">
+                                <input
+                                    type="checkbox"
+                                    checked={transactionFormData.enableMobileSigning ? true : false}
+                                    onChange={(e) => setTransactionFormData({
+                                        ...transactionFormData,
+                                        enableMobileSigning: e.target.checked
+                                    })}
+                                    className="accent-[var(--mainPrimaryBtn)]" />
+                                Recipients can sign from mobile device
+                            </label>
+                        </div>
+
                     </div>
 
                     {/* Reminders */}
-                    <div>
+                    {false && <div>
                         <h3 className="text-lg font-semibold mb-3">Reminders</h3>
                         <p className="text-sm text-gray-600 mb-4">
                             Follow up with automatic reminders. Signers will receive emails until they sign or decline the envelope.
                         </p>
-                        <div>
+                        <div className="flex">
                             <button
-                                onClick={() => setAutoReminders(!autoReminders)}
-                                className={`relative w-14 h-7 flex items-center rounded-full p-1 transition-colors duration-200 ${autoReminders ? "bg-purple-600" : "bg-gray-300"
+                                onClick={() => setTransactionFormData({
+                                    ...transactionFormData,
+                                    reminderConfig: {
+                                        ...transactionFormData.reminderConfig,
+                                        reminderEnabled: !transactionFormData.reminderConfig.reminderEnabled
+                                    }
+                                })}
+                                className={`relative w-9 h-5 flex items-center rounded-full p-1 transition-colors duration-200 ${transactionFormData?.reminderConfig.reminderEnabled ? "bg-[var(--mainPrimaryBtn)]" : "bg-gray-300"
                                     }`}
                             >
                                 <span
-                                    className={`bg-white w-5 h-5 rounded-full shadow-md transform transition-transform duration-200 ${autoReminders ? "translate-x-7" : "translate-x-0"
+                                    className={`bg-white w-3.5 h-3.5 rounded-full shadow-md transform transition-transform duration-200 ${transactionFormData?.reminderConfig.reminderEnabled ? "translate-x-3.5" : "translate-x-0"
                                         }`}
                                 />
                             </button>
                             <span className="ml-3 text-sm">Turn on auto reminders</span>
                         </div>
-                    </div>
+                    </div>}
 
                     {/* Expiration */}
                     <div>
-                        <h3 className="text-lg font-semibold mb-3">Expiration</h3>
+                        <h3 className="relative flex justify-start items-center text-lg font-semibold mb-3">
+                            <FaCaretRight className="absolute text-2xl left-[-25px]" />
+                            <span>
+                                Expiration
+                            </span>
+                        </h3>
                         <p className="text-sm text-gray-600 mb-4">
                             By default, envelopes expire after 120 days. Recipients can no longer view or sign an envelope after it expires.
                         </p>
 
                         <div className="flex items-center gap-4 mb-3">
-                            <select className="border rounded px-3 py-2 text-sm">
-                                <option>Custom days</option>
-                            </select>
+
                             <input
                                 type="number"
-                                value={expireDays}
-                                onChange={(e) => setExpireDays(Number(e.target.value))}
-                                className="border rounded px-3 py-2 text-sm w-20"
+                                value={transactionFormData.expireAfter}
+                                onChange={(e) => {
+                                    if (Number(e.target.value) >= 999) return;
+                                    if (Number(e.target.value) == 0) e.target.value = "1";
+                                    setTransactionFormData({
+                                        ...transactionFormData,
+                                        expireAfter: Number(e.target.value)
+                                    })
+                                }}
+                                className="border border-slate-300 rounded px-3 py-2 text-sm w-20 outline-0"
                             />
                         </div>
 
                         <p className="text-sm text-gray-600 mb-6">
-                            Envelopes will expire on: <span className="font-medium">1/3/2026</span>
+                            Envelopes will expire on: <span className="font-medium">
+                                {new Date(new Date(transactionDetails.createdAt).getTime() + (transactionFormData.expireAfter * 24 * 60 * 60 * 1000)).toLocaleDateString('en-US', {
+                                    year: 'numeric',
+                                    month: 'long',
+                                    day: 'numeric'
+                                })}
+
+                            </span>
                         </p>
 
-                        <div className="flex items-center gap-4">
+                        {/* <div className="flex items-center gap-4">
                             <select className="border rounded px-3 py-2 text-sm">
                                 <option>Custom days</option>
                             </select>
@@ -98,17 +210,21 @@ export default function AdvancedOptions({setShowAdvancedOptions}) {
                                 onChange={(e) => setAlertDays(Number(e.target.value))}
                                 className="border rounded px-3 py-2 text-sm w-20"
                             />
-                        </div>
+                        </div> */}
                     </div>
                 </div>
             </div>
 
             {/* Footer */}
             <div className="border-t p-4 flex justify-end">
-                <button className="bg-purple-600 text-white px-6 py-2 rounded hover:bg-purple-700 transition">
+                <button
+                    onClick={handleSaveBtnClick}
+                    className="bg-[var(--mainPrimaryBtn)] text-white px-6 py-2 rounded hover:bg-purple-700 transition">
                     Save
                 </button>
             </div>
         </div>
     );
 }
+
+export default AdvancedOptions;
diff --git a/src/components/process/processStepOne/DocumentCard.tsx b/src/components/process/processStepOne/DocumentCard.tsx
index 264371a..25476e3 100644
--- a/src/components/process/processStepOne/DocumentCard.tsx
+++ b/src/components/process/processStepOne/DocumentCard.tsx
@@ -1,24 +1,24 @@
 import React, { useEffect, useState } from 'react'
-import { FaFileAlt, FaCheckCircle, FaUpload } from 'react-icons/fa'
-import { MdFileUpload } from 'react-icons/md'
+import { FaFileAlt } from 'react-icons/fa'
 import { RiDraggable } from 'react-icons/ri'
 import { deleteDocument, setDocProgComplete } from '../../../store/slices/documentSlice'
 import { useDispatch } from 'react-redux'
 import { AppDispatch } from '../../../store/store'
-import { IoMdClose } from 'react-icons/io'
+import { VscClose } from "react-icons/vsc";
 import api from '../../../config/api'
 import { useParams } from 'react-router-dom'
-import axios from 'axios'
+import { TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice'
+import { BiSolidFilePdf } from 'react-icons/bi'
 
 
 interface DocumentCardProps {
   id: string;
   name: string;
   isCompleted: boolean;
-  transactionTemplateToggle:boolean;
+  transactionTemplateToggle: TRANSACTION_TEMPLATE_TOGGLE;
 }
 
-const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted , transactionTemplateToggle }) => {
+const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted, transactionTemplateToggle }) => {
   const params = useParams<{ accountId?: string; transactionId?: string; templateId?: string }>();
   const accountId = params.accountId;
   const transactionId = params.transactionId || params.templateId;
@@ -32,9 +32,10 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted , tra
   const [documentDel, setDocumentDel] = useState<{ docId: string | null, isDel: boolean }>({ docId: null, isDel: false })
 
   const dispatch = useDispatch<AppDispatch>()
-
+ 
   useEffect(() => {
-    let isCompleted = false;
+    if(isCompleted) return;
+    isCompleted = false;
     let updateTimeout: ReturnType<typeof setTimeout> | null = null;
     let lastUpdate = 0;
     const delay = 1000;
@@ -110,21 +111,21 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted , tra
 
       <div
         key={id}
-        className="relative w-[160px] h-[170px] bg-white rounded-xl shadow-sm hover:shadow-md transition p-4 flex flex-col items-center justify-evenly"
+        className="relative min-w-[260px] max-w-max bg-gray-100 py-0.5 rounded-md hover:shadow-sm transition flex justify-start items-center"
         draggable
       >
-        <IoMdClose
+        <VscClose
           onClick={() => setDocumentDel({ docId: id, isDel: false })}
-          className='absolute right-2.5 top-2.5 text-slate-400 text-xl hover:text-red-500 cursor-pointer transition-all' />
+          className='absolute right-2 top-2.5 text-lg hover:text-red-500 cursor-pointer transition-all' />
         {/* Draggable handle */}
         <RiDraggable
           draggable
           onDragStart={(e) => e.dataTransfer.setData('text/plain', id)}
-          className="absolute top-2 left-2 text-gray-400 text-lg cursor-grab drag-handle"
+          className="mx-2 text-gray-400 text-lg cursor-grab drag-handle"
         />
 
         {/* Main icon or circular loader */}
-        <div className="flex flex-col items-center mt-2 mb-1">
+        <div className="flex items-center mt-2 mb-1">
           {!isCompleted ? (
             <div className="relative w-16 h-16">
               <svg width="64" height="64" className="rotate-[-90deg]">
@@ -154,24 +155,24 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted , tra
               </div>
             </div>
           ) : (
-            <FaFileAlt className="text-[var(--primary)] text-5xl mb-1" /> 
+            <BiSolidFilePdf className="text-red-600 text-xl mb-1" />
           )}
         </div>
 
         {/* Document name */}
-        <span className="text-center text-sm text-gray-800 font-medium truncate max-w-[14ch] leading-snug">
+        <span className={`text-center text-xs ml-2 text-gray-800 font-medium truncate ${isCompleted ? "max-w-[25ch]" : "max-w-[18ch]"} leading-snug`}>
           {name}
         </span>
 
         {/* Status message */}
-        <span className="text-xs text-gray-500 mt-1">{message}</span>
+        {/* <span className="text-xs text-gray-500 mt-1">{message}</span> */}
       </div>
 
 
 
       {
         documentDel.docId !== null && <div className="fixed inset-0 backdrop-blur-sm flex items-center justify-center z-50">
-          <div className="bg-white rounded-lg shadow-xl p-6 w-80">
+          <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>
             <div className="flex justify-end gap-3">
@@ -193,9 +194,6 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted , tra
 
 
       }
-
-
-
     </>
   )
 }
diff --git a/src/components/process/processStepOne/MessageCon.tsx b/src/components/process/processStepOne/MessageCon.tsx
new file mode 100644
index 0000000..cfb6713
--- /dev/null
+++ b/src/components/process/processStepOne/MessageCon.tsx
@@ -0,0 +1,138 @@
+import { useEffect, useState } from "react";
+import { IoMdClose } from "react-icons/io";
+import { UserState } from "../../../store/slices/userSlice";
+import { TRANSACTION_TEMPLATE_TOGGLE } from "../../../store/slices/selectedRecipientsSlice";
+import api from "../../../config/api";
+
+
+interface MessageConIntProps {
+    transactionTemplateToggle: TRANSACTION_TEMPLATE_TOGGLE;
+    accountId: string;
+    transactionId: string;
+    messageModal: boolean;
+    setMessageModal: React.Dispatch<boolean>;
+}
+
+
+const MessageCon: React.FC<MessageConIntProps> = ({ transactionTemplateToggle, accountId, transactionId, messageModal, setMessageModal }) => {
+    interface EmailDtls {
+        subject: string;
+        message: string;
+    }
+
+    const [emailDtls, setEmailDtls] = useState<EmailDtls>({
+        subject: "Documents for Signature",
+        message: "",
+    });
+
+    const [templateName, setTemplateName] = useState('Untitled');
+
+    const fetchEmailDetails = async () => {
+        try {
+            const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`);
+
+            if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
+                setTemplateName(res.data.name)
+            }
+
+            setEmailDtls(
+                { subject: res.data.subject ? res.data.subject : "Documents for Signature", message: res.data.message ? res.data.message : "" }
+            )
+
+        } catch (e) {
+
+        }
+    }
+
+    const handleMessageSaveClick = async () => {
+        await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, {
+            name: templateName,
+            subject: emailDtls.subject, message: emailDtls.message,
+            status: "CREATED"
+        })
+    }
+
+    useEffect(() => {
+        fetchEmailDetails()
+    }, [messageModal])
+
+
+    return (
+        <section className="w-full">
+            {/* Header */}
+            <div className="flex justify-between items-center mb-6">
+                <h2 className="text-lg font-semibold text-gray-800">Message</h2>
+                <IoMdClose
+                    onClick={() => {
+                        // handleRecipientAdd();
+                        setMessageModal(false)
+                    }}
+                    className="text-2xl text-gray-400 hover:text-gray-600 cursor-pointer transition"
+                />
+            </div>
+
+            {/* Subject */}
+            <div className="flex flex-col mb-6">
+                <label
+                    htmlFor="subject"
+                    className="text-sm font-medium text-gray-700 mb-2"
+                >
+                    Subject
+                </label>
+                <input
+                    id="subject"
+                    type="text"
+                    required
+                    value={emailDtls.subject}
+                    onChange={(e) =>
+                        setEmailDtls({ ...emailDtls, subject: e.target.value })
+                    }
+                    placeholder="Enter email subject"
+                    className="w-full lg:w-4xl px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[var(--primary)] focus:border-[var(--primary)] text-base"
+                />
+            </div>
+
+            {/* Message */}
+            <div className="flex flex-col">
+                <label
+                    htmlFor="message"
+                    className="text-sm font-medium text-gray-700 mb-2"
+                >
+                    Message
+                </label>
+                {/* <div>
+                    <p>Add Placeholder</p>
+                    <div>
+                        <span>Sender Name</span>
+                        <span>Recipient Name</span>
+                        <span>Recipient Email</span>
+                    </div>
+                </div> */}
+                <textarea
+                    id="message"
+                    rows={6}
+                    value={emailDtls.message}
+                    onChange={(e) =>
+                        setEmailDtls({ ...emailDtls, message: e.target.value })
+                    }
+                    placeholder="Write your message..."
+                    className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[var(--primary)] focus:border-[var(--primary)] text-base resize-none"
+                />
+            </div>
+
+            <div className="flex flex-row-reverse gap-2 mt-4">
+                <button
+                    onClick={() => {
+                        setMessageModal(false)
+                        handleMessageSaveClick()
+                    }}
+                    className="bg-[var(--primary)] px-3 py-1 rounded-sm text-white opacity-80 hover:bg-[var(--primary)] hover:opacity-100 transition-all duration-200 cursor-pointer">Save & Close</button>
+                <button
+                    onClick={() => setMessageModal(false)}
+                    className="bg-slate-400 px-3 py-1 rounded-sm text-white hover:bg-slate-500 transition-all duration-200 cursor-pointer">Close</button>
+            </div>
+        </section>
+    );
+};
+
+export default MessageCon;
diff --git a/src/components/process/processStepOne/ProcessStepOne.tsx b/src/components/process/processStepOne/ProcessStepOne.tsx
index 8e61937..ab36ad5 100644
--- a/src/components/process/processStepOne/ProcessStepOne.tsx
+++ b/src/components/process/processStepOne/ProcessStepOne.tsx
@@ -8,38 +8,50 @@ import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../../../store/store";
 import { useEffect, useRef, useState } from "react";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
-import { setImages } from "../../../store/slices/selectedDocsSlice";
-import { addRecipient, addRecipientAsync, fetchRecipients, recipientType, removeAllRecipients, removeRecipientAsync, resetRecipients, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE, updateRecipientIds } from "../../../store/slices/selectedRecipientsSlice";
-import { setTransactionId, TRANSACTION_STATUS_ENUMS, updateTransactionStatus } from "../../../store/slices/transactionSlice";
+
+import { addRecipientAsync, fetchRecipients, recipientType, removeAllRecipients, removeRecipientAsync, resetRecipients, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE } from "../../../store/slices/selectedRecipientsSlice";
+import { TRANSACTION_STATUS_ENUMS, updateTransactionStatus } from "../../../store/slices/transactionSlice";
 import { hideLoader, showLoader } from "../../../store/slices/loaderSlice";
 import Loader from "../../dashboard/Loader";
 import { Bounce, toast } from "react-toastify";
-import { fetchDocuments, resetDocuments, setDocuments, uploadDocuments } from "../../../store/slices/documentSlice";
+import { fetchDocuments, resetDocuments, setDocuments } from "../../../store/slices/documentSlice";
 import { SignTypeEnum } from "../../../utlity/types";
 import { RiPencilFill } from "react-icons/ri";
 import SelfSignWarnModal from "./SelfSignWarnModal";
 import AdvancedOptions from "./AdvancedOptions";
+import getMinRoutingOrder from "../../../utlity/commonUtils";
+import MessageCon from "./MessageCon";
+import RecipientsCon from "./RecipientsCon";
+import { VscClose } from "react-icons/vsc";
+
+interface EmailDtls {
+  subject: string;
+  message: string;
+}
+
+export interface FormSubmitInt {
+  documents: boolean;
+  recipients: boolean;
+  subject: boolean;
+  invalidRecipientEmail: boolean;
+  invalidRecipientLastName: boolean;
+  duplicateEmailSameRoutingOrder: boolean;
+  email: string;
+  showError: boolean;
+  allValid: boolean;
+}
 
 const ProcessStepOne = () => {
-  interface EmailDtls {
-    subject: string;
-    message: string;
-  }
-
-  interface FormSubmitInt {
-    documents: boolean,
-    recipients: boolean,
-    subject: boolean,
-    recipientEmailAndLastName: boolean,
-    duplicateEmailSameRoutingOrder: boolean
-  }
-
   const FormSubmitIntitialState = {
     documents: false,
     recipients: false,
     subject: false,
-    recipientEmailAndLastName: false,
-    duplicateEmailSameRoutingOrder: false
+    invalidRecipientEmail: false,
+    invalidRecipientLastName: false,
+    duplicateEmailSameRoutingOrder: false,
+    email: "",
+    showError: false,
+    allValid: false
   }
 
   let transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS;
@@ -52,7 +64,7 @@ const ProcessStepOne = () => {
   let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
   const [searchParams] = useSearchParams();
 
-  const isTamplate = searchParams.get('useTemplate')
+  const isTemplate = searchParams.get('useTemplate')
 
   const navigate = useNavigate();
   const dispatch = useDispatch();
@@ -128,22 +140,15 @@ const ProcessStepOne = () => {
     if (submitError.recipients) setSubmitError(prev => ({ ...prev, recipients: false }))
   }, [selectedRecipients])
 
-
-  const getMinRoutingOrder = () => {
-    return selectedRecipients.reduce((min, recipient) => {
-      return Math.min(min, recipient.routingOrder ?? Infinity);
-    }, Infinity);
-  };
-
   const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
-  const handleNextClick = async (saveAndClose: boolean = false) => {
+  const validationCheck = () => {
     let formError = { ...FormSubmitIntitialState }
-
     const recipientsData: { [key: string | number]: string[] } = {}
     for (const recipient of selectedRecipients) {
       if (recipientsData[recipient.routingOrder] && recipientsData[recipient.routingOrder].includes(recipient.email)) {
         formError.duplicateEmailSameRoutingOrder = true;
+        formError.email = recipient.email
         break;
       }
 
@@ -162,26 +167,53 @@ const ProcessStepOne = () => {
         formError.recipients = true;
       } else {
         // Check if all recipients have email and lastName
-        const isValid = selectedRecipients.every(
-          (item) => item.email?.trim() !== '' && item.lastName?.trim() !== ''
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+        const invalidRecipients = selectedRecipients.filter(
+          (item) =>
+            !item.email?.trim() ||
+            !emailRegex.test(item.email.trim())
         );
 
-        if (!isValid) {
+
+        const invalidRecipientslastName = selectedRecipients.filter(
+          (item) =>
+            !item.lastName?.trim()
+        );
+
+
+        if (invalidRecipientslastName.length > 0) {
           // alert('All recipients must have both Email and Last Name filled.');
-          formError.recipientEmailAndLastName = true;
+          formError.invalidRecipientLastName = true;
+        }
+
+        if (invalidRecipients.length > 0) {
+          // alert('All recipients must have both Email and Last Name filled.');
+          formError.invalidRecipientEmail = true;
+          formError.email = invalidRecipients[0].email
         }
       }
+
       if (!emailDtls.subject.length) {
         formError.subject = true
       }
 
-
       if (SignTypeEnum.selfSign === signType) formError.recipients = false;
 
-      if (formError.documents || formError.recipients || formError.subject || formError.recipientEmailAndLastName || formError.duplicateEmailSameRoutingOrder) {
-        setSubmitError(formError)
-        return;
+      if (formError.documents || formError.recipients || formError.subject || formError.invalidRecipientLastName || formError.invalidRecipientEmail || formError.duplicateEmailSameRoutingOrder) {
+        setSubmitError({ ...formError, allValid: false })
+        return false
       }
+      setSubmitError({ ...formError, allValid: true })
+      return true
+    }
+  }
+
+
+  const handleNextClick = async (saveAndClose: boolean = false) => {
+    if (!validationCheck() && transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
+      setSubmitError((prev) => ({ ...prev, showError: true }))
+      return
     }
 
     try {
@@ -203,9 +235,16 @@ const ProcessStepOne = () => {
         console.error(err)
       });
 
+      dispatch(showLoader("Processing Message..."));
+      await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, {
+        name: templateName,
+        subject: emailDtls.subject, message: emailDtls.message,
+        status: "CREATED"
+      })
+
       dispatch(showLoader("Processing Recipients..."));
 
-      let minRoutingOrder = getMinRoutingOrder();
+      let minRoutingOrder = getMinRoutingOrder({ recipients: selectedRecipients });
 
       const recipientsData = selectedRecipients.map((recipient, index) => ({
         id: "id" in recipient ? recipient.id : null,
@@ -283,16 +322,7 @@ const ProcessStepOne = () => {
         if (!accountId || !transactionId) return;
         dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
       }
-      dispatch(showLoader("Processing Message..."));
 
-      let res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, {
-        name: templateName,
-        subject: emailDtls.subject, message: emailDtls.message,
-        status: "CREATED"
-      })
-
-      dispatch(resetDocuments())
-      dispatch(resetRecipients())
       if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
         dispatch(hideLoader());
         if (!saveAndClose) {
@@ -339,11 +369,14 @@ const ProcessStepOne = () => {
     navigate('/')
   }
 
+  useEffect(() => {
+    validationCheck()
+  }, [selectedDocuments, selectedRecipients, emailDtls])
 
   const handleSelfSignCb = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.currentTarget.checked) {
       navigate("self_sign");
-      setShowSelfSignWarnModal((prev) => !prev)
+      if (selectedRecipients.length) setShowSelfSignWarnModal((prev) => !prev)
     } else {
       navigate("./../");
     }
@@ -352,9 +385,12 @@ const ProcessStepOne = () => {
   const globalLoader = useSelector((state: RootState) => state.loader)
 
 
-  if (showAdvancedOptions) {
+  if (showAdvancedOptions && accountId) {
     return (
-      <AdvancedOptions setShowAdvancedOptions={setShowAdvancedOptions} />
+      <AdvancedOptions
+        accountId={accountId}
+        transactionDetails={transactionDetails}
+        setShowAdvancedOptions={setShowAdvancedOptions} />
     )
   }
 
@@ -370,25 +406,27 @@ const ProcessStepOne = () => {
             {/* Left Section */}
             <div className='flex sm:flex-row items-start sm:items-center gap-2 sm:gap-4 w-full sm:w-auto'>
 
-              <IoMdClose
+              <VscClose
                 onClick={handleClose}
-                className='text-2xl  text-slate-500 cursor-pointer hover:text-[var(--primary)] transition self-start sm:self-auto'
+                className='text-2xl font-thin cursor-pointer hover:text-red-500 transition self-start sm:self-auto'
               />
 
-              <p className="text-base font-normal text-gray-700 border-l pl-4 relative w-full sm:w-auto">
+              <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 ? (
                   <>
                     <input
                       value={templateName}
                       onChange={handleChange}
-                      className="w-full sm:w-[250px] px-4 py-1.5 border-2 border-dashed rounded-md text-sm focus:outline-none transition border-gray-300 focus:ring-2 focus:border-dashed focus:ring-[var(--primary)]"
+                      className="w-full ml-4 sm:w-[250px] px-4 py-1.5 border-2 border-dashed rounded-md text-sm focus:outline-none transition border-gray-300 focus:ring-2 focus:border-dashed focus:ring-[var(--primary)]"
                     />
                     {!isTyping && (
                       <RiPencilFill className="absolute top-2.5 right-2 text-[17px]" />
                     )}
                   </>
                 ) : (
-                  "Add Recipient and Message"
+                  <span className="font-semibold text-black ml-5">Add Recipient and Message</span>
                 )}
               </p>
             </div>
@@ -398,27 +436,25 @@ const ProcessStepOne = () => {
               id="add-tags-btn-step-one"
               className='flex sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3 w-full sm:w-auto '>
 
+              <button
+                onClick={() => setShowAdvancedOptions(true)}
+                className="text-sm w-full sm:w-auto px-4 py-2 rounded text-slate-800 border shadow hover:bg-[var(--primary)] hover:text-white transition duration-300 cursor-pointer"
+              >
+                Advanced Options
+              </button>
+
               {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 hover:bg-[var(--primaryLight2)] transition cursor-pointer"
+                  className="text-sm w-full sm:w-auto px-4 py-2 rounded bg-[var(--primary)] text-white shadow transition duration-300 cursor-pointer"
                 >
                   Save & Close
                 </button>
               )}
 
-
-
-              <button
-                onClick={() => setShowAdvancedOptions(true)}
-                className="text-sm w-full sm:w-auto px-4 py-2 rounded text-slate-800 border shadow hover:bg-[var(--primaryLight2)] transition cursor-pointer"
-              >
-                Advanced Options
-              </button>
-
               <button
                 onClick={() => handleNextClick(false)}
-                className="text-sm w-full sm:w-auto px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition cursor-pointer"
+                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"}
               </button>
@@ -428,22 +464,22 @@ const ProcessStepOne = () => {
 
 
         {/* Main Content - Scrollable */}
-        <div className="h-screen pt-[80px] overflow-y-auto no-scrollbar">
+        <div className="h-screen pt-[95px] overflow-y-auto no-scrollbar">
           <div className="max-w-4xl rounded-xl shadow-md mx-auto px-6 pb-10 bg-[var(--documentUploadBg)] mb-5">
 
             {/* Documents */}
             <section>
               <h2 className="text-lg font-medium mb-4 pt-3 text-[var(--processStepOneTextHead)]">Documents</h2>
-              <div id="documents_con" className={`${submitError.documents ? "border border-red-500 rounded-sm p-2 ring-2 ring-red-300" : ""}`}>
+              <div id="documents_con" className={`${submitError && submitError.documents && submitError.showError ? "border border-red-500 rounded-sm p-2 ring-2 ring-red-300" : ""}`}>
                 <SelectedDocuments transactionTemplateToggle={transactionTemplateToggle} />
-                <p className="text-xs text-right px-2 pt-2 text-red-500">{submitError.documents && "At least one document is required."}</p>
+                <p className="text-xs text-right px-2 pt-2 text-red-500">{submitError && submitError.documents && submitError.showError && "At least one document is required."}</p>
               </div>
             </section>
 
             {/* Recipients */}
             <section className="mt-8">
               <p className="border-t border-gray-200"></p>
-              {!isTamplate &&
+              {!isTemplate &&
                 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>
@@ -451,41 +487,27 @@ const ProcessStepOne = () => {
                     <input
                       checked={signType === SignTypeEnum.selfSign}
                       onChange={(e) => handleSelfSignCb(e)}
-                      id="default-checkbox" type="checkbox" value="" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm outline-none"
+                      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"
                     />
                     <label htmlFor="default-checkbox" className="ms-2 text-sm flex gap-1 text-slate-600">
-                      <span>SELF </span><span>SIGN</span></label>
+                      I AM THE ONLY SIGNER</label>
                   </div>
                 </div>
               }
 
               {
                 (signType !== SignTypeEnum.selfSign || showSelfSignWarnModal) &&
-                <div className="flex flex-col gap-4 align-start">
-
-                  <div id="recipient_cards_con" className={`${submitError.duplicateEmailSameRoutingOrder ? "border border-red-500 rounded-sm p-2 ring-2 ring-red-300" : ""}`}>
-                    <RecipientCards
-                      userEmail={userData.email}
-                      getMinRoutingOrder={getMinRoutingOrder}
-                      transactionTemplateToggle={transactionTemplateToggle}
-                      setEditRecipient={setEditRecipient}
-                      setEditCase={setEditCase}
-                      editRecipient={editRecipient}
-                      setEditRecipientCurrentEmail={setEditRecipientCurrentEmail}
-                      editRecipientCurrentEmail={editRecipientCurrentEmail}
-                    />
-                    <p className="text-xs text-right px-2 pt-2 text-red-500">{submitError.duplicateEmailSameRoutingOrder && "Each Signing order must have unique emails."}</p>
-                  </div>
-
-                  <div
-                    ref={topRef}
-                    className={`relative w-full bg-[var(--mainViewBg)] ${globalLoader.isLoading ? 'pointer-events-none' : ''} ${submitError.recipients ? "border border-red-500 rounded-sm p-2 ring-2 ring-red-300" : ""}`}
-                  >
-                    <RecipientAddCard userEmail={userData.email} getMinRoutingOrder={getMinRoutingOrder} transactionTemplateToggle={transactionTemplateToggle} editRecipient={editRecipient} editCase={editCase} setEditRecipient={setEditRecipient} setEditCase={setEditCase} topRef={topRef} setEditRecipientCurrentEmail={setEditRecipientCurrentEmail} />
-                    <p className="text-xs text-right px-2 pt-2 text-red-500">{submitError.recipients && "Each Signing order must have unique emails."}</p>
-                  </div>
-
-                </div>
+                <>
+                  <RecipientsCon
+                    transactionTemplateToggle={transactionTemplateToggle}
+                    accountId={accountId}
+                    transactionId={transactionId}
+                    userData={userData}
+                    // setEditRecipientsModal={setEditRecipientsModal}
+                    submitError={submitError}
+                    isModal={false}
+                  />
+                </>
               }
             </section>
 
@@ -494,34 +516,40 @@ const ProcessStepOne = () => {
               <h2 className="text-lg font-medium mb-4 pt-6 border-t border-gray-200 text-[var(--processStepOneTextHead)]">Email</h2>
 
               {/* Subject */}
-              <div className={`${submitError.subject ? "border border-red-500 rounded-sm p-2 ring-2 ring-red-300" : ""} flex flex-col mb-4`}>
-                <label className='text-sm font-medium text-[var(--greyTextCol)] mb-1'>Subject</label>
-                <input
-                  id="subject"
-                  type="text"
-                  required
-                  value={emailDtls.subject}
-                  onChange={(e) => {
-                    setEmailDtls({ ...emailDtls, subject: e.target.value })
-                    submitError.subject && setSubmitError(prev => ({ ...prev, subject: false }))
-                  }}
-                  placeholder="Email Subject"
-                  className="w-full px-3 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
-                />
-                <p className="text-xs text-right px-2 pt-2 text-red-500">{submitError.subject && "Enter a subject."}</p>
+              <div className="border-1 rounded-xl border-gray-300 px-6 py-8">
+
+                <div className={`${submitError.subject && submitError.showError ? "border border-red-500 rounded-sm p-2 ring-2 ring-red-300" : ""} flex flex-col mb-4`}>
+                  <label className='text-sm font-medium mb-1'>Subject</label>
+                  <input
+                    id="subject"
+                    type="text"
+                    required
+                    value={emailDtls.subject}
+                    onChange={(e) => {
+                      setEmailDtls({ ...emailDtls, subject: e.target.value })
+                      submitError.subject && setSubmitError(prev => ({ ...prev, subject: false }))
+                    }}
+                    placeholder="Email Subject"
+                    className="w-full px-3 py-2 rounded-lg border border-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
+                  />
+                  {submitError.subject && submitError.showError && <p className="text-xs text-right px-2 pt-2 text-red-500">{submitError.subject && "Enter a subject."}</p>}
+                </div>
+
+                {/* Message */}
+                <div className='flex flex-col'>
+                  <label className='text-sm font-medium mb-1'>Message for signers</label>
+                  <textarea
+                    rows={4}
+                    value={emailDtls.message}
+                    onChange={(e) => setEmailDtls({ ...emailDtls, message: e.target.value })}
+                    placeholder="Message"
+                    className="w-full px-3 py-2 rounded-lg border border-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
+                  />
+                </div>
               </div>
 
-              {/* Message */}
-              <div className='flex flex-col'>
-                <label className='text-sm font-medium text-[var(--greyTextCol)] mb-1'>Message</label>
-                <textarea
-                  rows={4}
-                  value={emailDtls.message}
-                  onChange={(e) => setEmailDtls({ ...emailDtls, message: e.target.value })}
-                  placeholder="Message"
-                  className="w-full px-3 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
-                />
-              </div>
+
+
             </section>
 
           </div>
diff --git a/src/components/process/processStepOne/RecipientAddCard.tsx b/src/components/process/processStepOne/RecipientAddCard.tsx
index 45e36a9..3aab883 100644
--- a/src/components/process/processStepOne/RecipientAddCard.tsx
+++ b/src/components/process/processStepOne/RecipientAddCard.tsx
@@ -25,21 +25,20 @@ export interface ContactTypeObj {
   setEditRecipientCurrentEmail: any
 }
 
-
 const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, setEditRecipient, setEditCase, topRef, setEditRecipientCurrentEmail, showCard = false, recipientData = null }) => {
-   const [activeAccountId, setActiveAccountId] = useState<string | null>(
+  const [activeAccountId, setActiveAccountId] = useState<string | null>(
     JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
   );
 
   const recipients = useSelector((state: RootState) => state.selectedRecipients.recipients);
-  
+
   const [contactData, setContactData] = useState<ContactTypeObj>({ type: "", contacts: [] });
   const [openContactModal, setOpenContactModal] = useState(false);
 
   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)
 
@@ -216,7 +215,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
         updatedRecipient.hostEmail = "";
       }
 
-      
+
       if (editCase === "Edit") {
         dispatch(updateRecipient(updatedRecipient));
       } else {
@@ -295,7 +294,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
 
   useDebouncedEffect(() => {
     if (!activeField || !manualFocusTriggered) return;
-    
+
 
     const inputValue = recipient[activeField].trim().toLowerCase();
     console.log(inputValue, "Line 297", activeField)
@@ -324,7 +323,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
 
 
     if (lastQuery !== inputValue) {
-      if(lastQuery !== null && inputValue.startsWith(lastQuery)) return
+      if (lastQuery !== null && inputValue.startsWith(lastQuery)) return
 
       setLastQuery(inputValue);
       api
@@ -363,13 +362,13 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
 
 
 
- return (
+  return (
     <div ref={containerRef}>
       <form
         ref={formRef}
         onSubmit={handleRecipientAdd}
         id="add-recipient-step-one"
-        className="w-full bg-white border border-gray-200 rounded-lg shadow-sm px-3 sm:px-4 lg:px-6 py-3 sm:py-4 space-y-3 sm:space-y-4 relative"
+        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 && (
           <div className="space-y-2 sm:space-y-3">
@@ -482,7 +481,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
               value={recipient.email}
               placeholder="Recipient Email"
               className={`w-full px-3 sm:px-4 py-2 border rounded-md text-sm focus:outline-none transition
-                ${errors.email || errors.emailFormat  ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
+                ${errors.email || errors.emailFormat ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
               onChange={(e) => {
                 setRecipients({ ...recipient, email: e.target.value });
                 setErrors((prev) => ({ ...prev, email: false }));
@@ -555,7 +554,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
                   name="recipient-type"
                   value={option.value}
                   checked={recipient.type === option.value}
-                  onClick={(e) => setRecipients({ ...recipient, type: e.target.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"
                 />
                 <span className="whitespace-nowrap">{option.label}</span>
@@ -567,11 +566,11 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
           {!showCard && (
             <button
               type="submit"
-              className="inline-flex items-center justify-center gap-2 bg-[var(--primary)] hover:bg-[var(--primaryLight2)] text-white text-xs sm:text-sm font-semibold px-4 sm:px-5 py-2 rounded-md transition w-full sm:w-auto min-w-fit"
+              className="inline-flex items-center justify-center gap-2 bg-[var(--mainPrimaryBtn)] text-white text-sm font-semibold px-8 py-2 rounded-md transition w-full sm:w-auto min-w-fit cursor-pointer"
             >
-              <FaPlus size={12} className="sm:w-3.5 sm:h-3.5" /> 
+              {/* <FaPlus size={12} className="sm:w-3.5 sm:h-3.5" /> */}
               <span className="whitespace-nowrap">
-                {editCase === "Edit" ? "Edit Recipient" : "Add Recipient"}
+                {editCase === "Edit" ? "Edit" : "Add"}
               </span>
             </button>
           )}
diff --git a/src/components/process/processStepOne/RecipientCards.tsx b/src/components/process/processStepOne/RecipientCards.tsx
index 1670e38..5749848 100644
--- a/src/components/process/processStepOne/RecipientCards.tsx
+++ b/src/components/process/processStepOne/RecipientCards.tsx
@@ -6,6 +6,9 @@ import {
     TRANSACTION_TEMPLATE_TOGGLE,
     updateRecipient,
     recipientType,
+    setSelectedRecipients,
+    reorderAllRecipientAscOrder,
+    updateRecipientByIndxAndRo,
 } from "../../../store/slices/selectedRecipientsSlice";
 import { AppDispatch, RootState } from "../../../store/store";
 import { ImBin } from "react-icons/im";
@@ -13,11 +16,24 @@ import { useState } from "react";
 import SigningOrderDiagram from "../../../SigningOrderDiagram ";
 import { IoCloseOutline } from "react-icons/io5";
 import { useParams } from "react-router-dom";
-import { FiEdit } from "react-icons/fi";
 import { FaUsersLine } from "react-icons/fa6";
-import { IoMdClose } from "react-icons/io";
 import { BiSolidHelpCircle } from "react-icons/bi";
 
+import {
+    DndContext,
+    closestCenter,
+    DragEndEvent,
+} from "@dnd-kit/core";
+import {
+    arrayMove,
+    SortableContext,
+    useSortable,
+    verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import SortableRecipient from "./SortableRecipient";
+
+
 
 const getInitials = (name: string) => {
     if (!name) return "";
@@ -30,7 +46,7 @@ const getInitials = (name: string) => {
 
 type CardsData = {
     userEmail: string;
-    getMinRoutingOrder: () => number;
+    // getMinRoutingOrder: () => number;
     editRecipient: any;
     setEditRecipient: (recipient: any) => void;
     setEditCase: (string: any) => void;
@@ -218,8 +234,127 @@ const RecipientCards = ({
         setEditingField(null);
     };
 
+    const handleDragEnd = (event: DragEndEvent) => {
+        const { active, over } = event;
+        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 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
+
+        let newActiveRecRo = 1
+        let newOverRecRo = 1
+
+        // if (activeRec.routingOrder >= overRecRo && activeIndex > overIndex) {
+        //     newActiveRecRo = activeRecRo > 1 ? activeRecRo - 1 : 1
+        //     newOverRecRo = activeRecRo > 1 ? activeRecRo + 1 : 2
+        // }
+
+        // if (activeRec.routingOrder >= overRecRo && activeIndex < overIndex) {
+        //     newActiveRecRo = overRecRo > 1 ? overRecRo + 1 : 2
+        //     newOverRecRo = overRecRo > 1 ? overRecRo - 1 : 1
+        // }
+
+        // if (activeRec.routingOrder <= overRecRo && activeIndex > overIndex) {
+        //     newActiveRecRo = activeRecRo > 1 ? activeRecRo - 1 : 1
+        //     newOverRecRo = activeRecRo > 1 ? activeRecRo + 1 : 2
+        // }
+
+        // if (activeRec.routingOrder <= overRecRo && activeIndex < overIndex) {
+        //     newActiveRecRo = overRecRo > 1 ? overRecRo + 1 : 2
+        //     newOverRecRo = overRecRo > 1 ? overRecRo - 1 : 1
+        // }
+
+
+
+        // if (activeRec.routingOrder > overRecRo && activeIndex < overIndex) {
+
+        //     console.log(activeIndex, overIndex, "283 2")
+        //     newActiveRecRo = overRecRo > 1 ? overRecRo : 2
+        //     newOverRecRo = activeRecRo > 1 ? activeRecRo : 1
+        // }
+
+        // if (activeRec.routingOrder < overRecRo && activeIndex > overIndex) {
+        //     console.log(activeIndex, overIndex, "283 3")
+        //     newActiveRecRo = overRecRo > 1 ? overRecRo : 1
+        //     newOverRecRo = activeRecRo > 1 ? activeRecRo : 2
+        // }
+
+
+
+        if (activeRecRo > overRecRo && activeIndex > overIndex) {
+            console.log(activeIndex, overIndex, "283 1")
+            newActiveRecRo = activeRecRo > 1 ? overRecRo : 1
+            newOverRecRo = overRecRo > 1 ? activeRecRo : 2
+        }
+        if (activeRecRo > overRecRo && activeIndex < overIndex) {
+            console.log(activeIndex, overIndex, "283 kam")
+            newActiveRecRo = activeRecRo > 1 ? activeRecRo : 2
+            newOverRecRo = overRecRo > 1 ? overRecRo : 1
+        }
+
+
+
+
+        if (activeRecRo < overRecRo && activeIndex < overIndex) {
+            console.log(activeIndex, overIndex, "283 4")
+            newActiveRecRo = overRecRo > 1 ? overRecRo : 2
+            newOverRecRo = activeRecRo > 1 ? activeRecRo : 1
+        }
+        if (activeRecRo < overRecRo && activeIndex > overIndex) {
+            console.log(activeIndex, overIndex, "283 mak")
+            newActiveRecRo = activeRecRo > 1 ? activeRecRo : 1
+            newOverRecRo = overRecRo > 1 ? overRecRo : 1
+        }
+
+
+
+        if (activeRecRo === activeRecRo && activeIndex < overIndex) {
+            newActiveRecRo = activeRecRo > 1 ? activeRecRo + 1 : 2
+            newOverRecRo = overRecRo > 1 ? overRecRo : 1
+        }
+        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) {
+        //         return (
+        //             {
+        //                 ...r, routingOrder: newActiveRecRo
+        //             }
+        //         )
+        //     }
+        //     if (idx === overRecRo) {
+        //         return (
+        //             {
+        //                 ...r, routingOrder: newOverRecRo
+        //             }
+        //         )
+        //     }
+        // });
+
+        // dispatch(updateRecipientOrder({ id: activeRec.id || activeRec.uuid, routingOrder: newActiveRecRo }));
+        // dispatch(updateRecipientOrder({ id: overRec.id || overRec.uuid, routingOrder: newOverRecRo }));
+
+        dispatch(updateRecipientByIndxAndRo({ indx1: activeIndex, ro1: newActiveRecRo, indx2: overIndex, ro2: newOverRecRo, }));
+
+
+
+        // dispatch(reorderAllRecipientAscOrder());
+    };
+
     return (
-        <div className="w-full bg-white rounded-md shadow-sm border border-gray-200">
+        <div className="w-full rounded-md bg-slate-50">
             {recipients.length > 0 ? (
                 <>
                     {recipients.length > 1 && (
@@ -237,227 +372,247 @@ const RecipientCards = ({
                         </div>
                     )}
 
-                    <div className="flex flex-col divide-y divide-gray-200 max-h-[47vh] overflow-y-auto custom-scrollbar">
-                        {recipients.map((recipient, idx) => (
-                            <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 ${idx % 2 === 0 ? 'bg-gray-50' : 'bg-white'} ${(recipient.uuid || recipient.id) === editRecipientCurrentEmail
-                                    ? "bg-neutral-100 opacity-40"
-                                    : ""
-                                    }`}
-                            >
-                                {/* Main Content Section */}
-                                <div className="flex items-start sm:items-center gap-2 sm:gap-3 min-w-0 flex-1">
-                                    {/* Order Number */}
-                                    {recipients.length > 1 ? (
-                                        <div className="relative flex-shrink-0">
-                                            <input
-                                                type="number"
-                                                value={recipient.routingOrder}
-                                                // min={1}
-                                                onChange={(e) =>
-                                                    handleOrderChange(
-                                                        recipient.id || recipient.uuid,
-                                                        Number(e.target.value)
-                                                    )
-                                                }
-                                                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">
-                                                <BiSolidHelpCircle className="absolute top-[-12px] right-[-10px] text-gray-400 cursor-pointer" />
+                    <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+                        <SortableContext
+                            items={recipients.map((r) => r.id || r.uuid)}
+                            strategy={verticalListSortingStrategy}
+                        >
+                            <div className="flex flex-col divide-y divide-gray-200 max-h-[47vh] overflow-y-auto custom-scrollbar">
+                                {recipients.map((recipient, idx) => (
+                                    <SortableRecipient
+                                        key={recipient.id || recipient.uuid}
+                                        recipient={recipient}
+                                        idx={idx}
+                                        editRecipientCurrentEmail={editRecipientCurrentEmail}
+                                    >
+                                        <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
+                                                ? "bg-neutral-100 opacity-40"
+                                                : ""
+                                                }`}
+                                        >
+                                            {/* Main Content Section */}
+                                            <div className="flex items-start sm:items-center gap-2 sm:gap-3 min-w-0 flex-1">
+                                                {/* Order Number */}
+                                                {recipients.length > 1 ? (
+                                                    <div className="relative flex-shrink-0">
+                                                        <input
+                                                            type="text"
+                                                            value={recipient.routingOrder === 0 ? "" : recipient.routingOrder}
+                                                            onChange={(e) => {
+                                                                const value = e.target.value;
+                                                                if (/^\d*$/.test(value)) {
+                                                                    const num = Number(value);
+                                                                    handleOrderChange(recipient.id || recipient.uuid, num);
+                                                                }
+                                                            }}
+                                                            onKeyDown={(e) => {
+                                                                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">
+                                                            <BiSolidHelpCircle className="absolute top-[-12px] right-[-10px] text-gray-400 cursor-pointer" />
 
-                                                {/* Tooltip */}
-                                                <span className="absolute top-[2px] left-[48px] hidden group-hover:block w-56 p-2 rounded-lg text-sm bg-white text-slate-600 shadow-lg z-10">
-                                                    Signing order: Recipients receive emails one after another.
-                                                    Same order means they all receive at once.
-                                                </span>
-                                            </p>}
-                                        </div>
-                                    ) : (
-                                        <input
-                                            type="number"
-                                            disabled
-                                            value={recipient.routingOrder}
-                                            min={1}
-                                            onChange={(e) =>
-                                                handleOrderChange(
-                                                    recipient.id || recipient.uuid,
-                                                    Number(e.target.value)
-                                                )
-                                            }
-                                            className="w-6 sm:w-8 text-center rounded text-sm text-gray-700 border-none focus:outline-none focus:ring-[var(--primary)] flex-shrink-0"
-                                        />
-                                    )}
+                                                            {/* Tooltip */}
+                                                            <span className="absolute top-[2px] left-[48px] hidden group-hover:block w-56 p-2 rounded-lg text-sm bg-white text-slate-600 shadow-lg z-10">
+                                                                Signing order: Recipients receive emails one after another.
+                                                                Same order means they all receive at once.
+                                                            </span>
+                                                        </p>}
+                                                    </div>
+                                                ) : (
+                                                    <input
+                                                        type="number"
+                                                        disabled
+                                                        value={recipient.routingOrder}
+                                                        min={1}
+                                                        onChange={(e) =>
+                                                            handleOrderChange(
+                                                                recipient.id || recipient.uuid,
+                                                                Number(e.target.value)
+                                                            )
+                                                        }
+                                                        className="w-6 sm:w-8 text-center rounded text-sm text-gray-700 border-none focus:outline-none focus:ring-[var(--primary)] flex-shrink-0"
+                                                    />
+                                                )}
 
-                                    {/* Avatar */}
-                                    {/* <div className="flex-shrink-0 w-7 h-7  sm:w-8 sm:h-8 rounded-full bg-[var(--primary)] text-white flex items-center justify-center font-semibold text-xs select-none">
+                                                {/* Avatar */}
+                                                {/* <div className="flex-shrink-0 w-7 h-7  sm:w-8 sm:h-8 rounded-full bg-[var(--primary)] text-white flex items-center justify-center font-semibold text-xs select-none">
                                         {getInitials(`${recipient.firstName} ${recipient.lastName || ""}`)}
                                     </div> */}
 
-                                    {/* Form Fields Section */}
-                                    <div className="min-w-0 flex-1">
-                                        {/* Role Name and Permissions Row */}
-                                        <div className="flex flex-col lg:flex-row lg:items-center gap-2 mb-2">
-                                            {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && <div className="flex-1 lg:w-1/2">
-                                                <div className="font-semibold text-gray-800 text-xs">
-                                                    {renderEditableField(recipient, "roleName", "Role name")}
-                                                </div>
-                                            </div>}
+                                                {/* Form Fields Section */}
+                                                <div className="min-w-0 flex-1">
+                                                    {/* Role Name and Permissions Row */}
+                                                    <div className="flex flex-col lg:flex-row lg:items-center gap-2 mb-2">
+                                                        {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && <div className="flex-1 lg:w-1/2">
+                                                            <div className="font-semibold text-gray-800 text-xs">
+                                                                {renderEditableField(recipient, "roleName", "Role name")}
+                                                            </div>
+                                                        </div>}
 
-                                            {/* 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 && (
-                                                    <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">
+                                                        {/* 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 && (
+                                                                <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
+                                                                            type="checkbox"
+                                                                            checked={recipient.allowSenderToEdit}
+                                                                            onChange={() =>
+                                                                                dispatch(
+                                                                                    updateRecipient({
+                                                                                        ...recipient,
+                                                                                        allowSenderToEdit: !recipient.allowSenderToEdit,
+                                                                                        uuid: getRecipientIdentifier(recipient),
+                                                                                    })
+                                                                                )
+                                                                            }
+                                                                            className="accent-blue-500 w-3 h-3 sm:w-4 sm:h-4"
+                                                                        />
+                                                                        <span className="whitespace-nowrap">Allow Edit</span>
+                                                                    </label>
+
+                                                                    <label className="flex items-center gap-1 text-xs sm:text-sm text-gray-700">
+                                                                        <input
+                                                                            type="checkbox"
+                                                                            checked={recipient.allowSenderToDelete}
+                                                                            onChange={() =>
+                                                                                dispatch(
+                                                                                    updateRecipient({
+                                                                                        ...recipient,
+                                                                                        allowSenderToDelete: !recipient.allowSenderToDelete,
+                                                                                        uuid: getRecipientIdentifier(recipient),
+                                                                                    })
+                                                                                )
+                                                                            }
+                                                                            className="accent-red-500 w-3 h-3 sm:w-4 sm:h-4"
+                                                                        />
+                                                                        <span className="whitespace-nowrap">Allow Delete</span>
+                                                                    </label>
+                                                                </div>
+                                                            )}
+                                                        </div>
+                                                    </div>
+
+                                                    {/* Name and Email Fields */}
+                                                    <div className="mb-2 w-[92%]">
+                                                        {/* Mobile: Stack vertically, Tablet+: Side by side */}
+                                                        <div className="flex flex-col sm:flex-row gap-1 sm:gap-2">
+                                                            <div className="flex flex-col sm:flex-row gap-1 sm:gap-2 sm:flex-1">
+                                                                <div className="w-full sm:w-1/2">
+                                                                    <div className="font-semibold text-gray-800 text-xs">
+                                                                        {renderEditableField(recipient, "firstName", "First Name")}
+                                                                    </div>
+                                                                </div>
+                                                                <div className="w-full sm:w-1/2">
+                                                                    <div className="font-semibold text-gray-800 text-xs">
+                                                                        {renderEditableField(recipient, "lastName", "Last Name")}
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                            <div className="w-full sm:flex-1">
+                                                                <div className="font-semibold text-gray-800 text-xs">
+                                                                    {renderEditableField(recipient, "email", "Recipient Email", "", "email")}
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+
+                                                    {/* Host Fields (for In-Person Signers) */}
+                                                    {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">
+                                                                    <div className="font-semibold text-gray-800 text-xs">
+                                                                        {renderEditableField(recipient, "hostName", "Host Name")}
+                                                                    </div>
+                                                                </div>
+                                                                <div className="w-full sm:w-1/2">
+                                                                    <div className="font-semibold text-gray-800 text-xs">
+                                                                        {renderEditableField(recipient, "hostEmail", "Host Email", "", "email")}
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    )}
+
+                                                    {/* Recipient Type Radio Buttons */}
+                                                    <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2 my-1.5 mx-1 sm:mx-2">
+                                                        <label className="flex items-center gap-1">
                                                             <input
-                                                                type="checkbox"
-                                                                checked={recipient.allowSenderToEdit}
-                                                                onChange={() =>
-                                                                    dispatch(
-                                                                        updateRecipient({
-                                                                            ...recipient,
-                                                                            allowSenderToEdit: !recipient.allowSenderToEdit,
-                                                                            uuid: getRecipientIdentifier(recipient),
-                                                                        })
-                                                                    )
-                                                                }
-                                                                className="accent-blue-500 w-3 h-3 sm:w-4 sm:h-4"
+                                                                type="radio"
+                                                                name={`recipient-type-${getRecipientIdentifier(recipient)}`}
+                                                                value={recipientType.SIGNER}
+                                                                checked={recipient.type === recipientType.SIGNER}
+                                                                onChange={() => handleTypeChange(recipient, recipientType.SIGNER)}
+                                                                onBlur={() => setEditingField(null)}
+                                                                className="accent-[var(--primary)] w-3 h-3"
+                                                                disabled={!isEditable(recipient)}
                                                             />
-                                                            <span className="whitespace-nowrap">Allow Edit</span>
+                                                            <span className="text-xs sm:text-sm">Signer</span>
                                                         </label>
-
-                                                        <label className="flex items-center gap-1 text-xs sm:text-sm text-gray-700">
+                                                        <label className="flex items-center gap-1">
                                                             <input
-                                                                type="checkbox"
-                                                                checked={recipient.allowSenderToDelete}
-                                                                onChange={() =>
-                                                                    dispatch(
-                                                                        updateRecipient({
-                                                                            ...recipient,
-                                                                            allowSenderToDelete: !recipient.allowSenderToDelete,
-                                                                            uuid: getRecipientIdentifier(recipient),
-                                                                        })
-                                                                    )
-                                                                }
-                                                                className="accent-red-500 w-3 h-3 sm:w-4 sm:h-4"
+                                                                type="radio"
+                                                                name={`recipient-type-${getRecipientIdentifier(recipient)}`}
+                                                                value={recipientType.INPERSONSIGNER}
+                                                                checked={recipient.type === recipientType.INPERSONSIGNER}
+                                                                onChange={() => handleTypeChange(recipient, recipientType.INPERSONSIGNER)}
+                                                                onBlur={() => setEditingField(null)}
+                                                                className="accent-[var(--primary)] w-3 h-3"
+                                                                disabled={!isEditable(recipient)}
                                                             />
-                                                            <span className="whitespace-nowrap">Allow Delete</span>
+                                                            <span className="text-xs sm:text-sm whitespace-nowrap">In Person Signer</span>
+                                                        </label>
+                                                        <label className="flex items-center gap-1">
+                                                            <input
+                                                                type="radio"
+                                                                name={`recipient-type-${getRecipientIdentifier(recipient)}`}
+                                                                value={recipientType.CC}
+                                                                checked={recipient.type === recipientType.CC}
+                                                                onChange={() => handleTypeChange(recipient, recipientType.CC)}
+                                                                onBlur={() => setEditingField(null)}
+                                                                className="accent-[var(--primary)] w-3 h-3"
+                                                                disabled={!isEditable(recipient)}
+                                                            />
+                                                            <span className="text-xs sm:text-sm">CC</span>
                                                         </label>
                                                     </div>
-                                                )}
-                                            </div>
-                                        </div>
-
-                                        {/* Name and Email Fields */}
-                                        <div className="mb-2 w-[92%]">
-                                            {/* Mobile: Stack vertically, Tablet+: Side by side */}
-                                            <div className="flex flex-col sm:flex-row gap-1 sm:gap-2">
-                                                <div className="flex flex-col sm:flex-row gap-1 sm:gap-2 sm:flex-1">
-                                                    <div className="w-full sm:w-1/2">
-                                                        <div className="font-semibold text-gray-800 text-xs">
-                                                            {renderEditableField(recipient, "firstName", "First Name")}
-                                                        </div>
-                                                    </div>
-                                                    <div className="w-full sm:w-1/2">
-                                                        <div className="font-semibold text-gray-800 text-xs">
-                                                            {renderEditableField(recipient, "lastName", "Last Name")}
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <div className="w-full sm:flex-1">
-                                                    <div className="font-semibold text-gray-800 text-xs">
-                                                        {renderEditableField(recipient, "email", "Recipient Email", "", "email")}
-                                                    </div>
                                                 </div>
                                             </div>
-                                        </div>
 
-                                        {/* Host Fields (for In-Person Signers) */}
-                                        {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">
-                                                        <div className="font-semibold text-gray-800 text-xs">
-                                                            {renderEditableField(recipient, "hostName", "Host Name")}
-                                                        </div>
-                                                    </div>
-                                                    <div className="w-full sm:w-1/2">
-                                                        <div className="font-semibold text-gray-800 text-xs">
-                                                            {renderEditableField(recipient, "hostEmail", "Host Email", "", "email")}
-                                                        </div>
-                                                    </div>
+                                            {/* Action Buttons */}
+                                            {signType !== "self-sign" && (
+                                                <div className="lg:ml-2 absolute top-[-8px] right-[-5px] px-1.5 py-1.5">
+                                                    <button
+                                                        type="button"
+                                                        title="Remove recipient"
+                                                        aria-label={`Remove recipient ${recipient.firstName}`}
+                                                        onClick={() => handleRemoveRecipient(recipient)}
+                                                        disabled={
+                                                            transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES
+                                                                ? false
+                                                                : !recipient.newOne && !recipient.allowSenderToDelete
+                                                        }
+                                                        className="text-gray-400 hover:text-red-600 transition-colors cursor-pointer disabled:opacity-50 p-1"
+                                                    >
+                                                        <ImBin size={14} className="sm:w-4 sm:h-4" />
+                                                    </button>
                                                 </div>
-                                            </div>
-                                        )}
-
-                                        {/* Recipient Type Radio Buttons */}
-                                        <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2 my-1.5 mx-1 sm:mx-2">
-                                            <label className="flex items-center gap-1">
-                                                <input
-                                                    type="radio"
-                                                    name={`recipient-type-${getRecipientIdentifier(recipient)}`}
-                                                    value={recipientType.SIGNER}
-                                                    checked={recipient.type === recipientType.SIGNER}
-                                                    onChange={() => handleTypeChange(recipient, recipientType.SIGNER)}
-                                                    onBlur={() => setEditingField(null)}
-                                                    className="accent-[var(--primary)] w-3 h-3"
-                                                    disabled={!isEditable(recipient)}
-                                                />
-                                                <span className="text-xs sm:text-sm">Signer</span>
-                                            </label>
-                                            <label className="flex items-center gap-1">
-                                                <input
-                                                    type="radio"
-                                                    name={`recipient-type-${getRecipientIdentifier(recipient)}`}
-                                                    value={recipientType.INPERSONSIGNER}
-                                                    checked={recipient.type === recipientType.INPERSONSIGNER}
-                                                    onChange={() => handleTypeChange(recipient, recipientType.INPERSONSIGNER)}
-                                                    onBlur={() => setEditingField(null)}
-                                                    className="accent-[var(--primary)] w-3 h-3"
-                                                    disabled={!isEditable(recipient)}
-                                                />
-                                                <span className="text-xs sm:text-sm whitespace-nowrap">In Person Signer</span>
-                                            </label>
-                                            <label className="flex items-center gap-1">
-                                                <input
-                                                    type="radio"
-                                                    name={`recipient-type-${getRecipientIdentifier(recipient)}`}
-                                                    value={recipientType.CC}
-                                                    checked={recipient.type === recipientType.CC}
-                                                    onChange={() => handleTypeChange(recipient, recipientType.CC)}
-                                                    onBlur={() => setEditingField(null)}
-                                                    className="accent-[var(--primary)] w-3 h-3"
-                                                    disabled={!isEditable(recipient)}
-                                                />
-                                                <span className="text-xs sm:text-sm">CC</span>
-                                            </label>
+                                            )}
                                         </div>
-                                    </div>
-                                </div>
 
-                                {/* Action Buttons */}
-                                {signType !== "self-sign" && (
-                                    <div className="lg:ml-2 absolute top-0 right-0 px-1.5 py-1.5 rounded-bl-sm border-l-1 border-b-1 border-slate-300 border-dashed">
-                                        <button
-                                            type="button"
-                                            title="Remove recipient"
-                                            aria-label={`Remove recipient ${recipient.firstName}`}
-                                            onClick={() => handleRemoveRecipient(recipient)}
-                                            disabled={
-                                                transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES
-                                                    ? false
-                                                    : !recipient.newOne && !recipient.allowSenderToDelete
-                                            }
-                                            className="text-gray-400 hover:text-red-600 transition-colors cursor-pointer disabled:opacity-50 p-1"
-                                        >
-                                            <ImBin size={14} className="sm:w-4 sm:h-4" />
-                                        </button>
-                                    </div>
-                                )}
+                                    </SortableRecipient>
+                                ))}
                             </div>
-                        ))}
-                    </div>
+                        </SortableContext>
+                    </ DndContext>
                 </>
             ) : (
                 <div className="p-4 sm:p-6 text-center text-gray-500 font-medium text-sm">
@@ -488,4 +643,85 @@ const RecipientCards = ({
     );
 };
 
-export default RecipientCards;
\ No newline at end of file
+export default RecipientCards;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+//     <SortableContext
+//         items={recipients.map((r) => r.id || r.uuid)}
+//         strategy={verticalListSortingStrategy}
+//     >
+//         <div className="flex flex-col divide-y divide-gray-200 max-h-[47vh] overflow-y-auto custom-scrollbar">
+//             {recipients.map((recipient, idx) => (
+//                 <SortableRecipient
+//                     key={recipient.id || recipient.uuid}
+//                     recipient={recipient}
+//                     idx={idx}
+//                     editRecipientCurrentEmail={editRecipientCurrentEmail}
+//                 >
+//                     {/* 🔹 your existing recipient card content goes here */}
+//                 </SortableRecipient>
+//             ))}
+//         </div>
+//     </SortableContext>
+// </DndContext>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/process/processStepOne/RecipientsCon.tsx b/src/components/process/processStepOne/RecipientsCon.tsx
new file mode 100644
index 0000000..690213c
--- /dev/null
+++ b/src/components/process/processStepOne/RecipientsCon.tsx
@@ -0,0 +1,179 @@
+import { useRef, useState } from "react";
+import RecipientAddCard from "./RecipientAddCard"
+import RecipientCards from "./RecipientCards"
+import { useParams } from "react-router-dom";
+import { SignTypeEnum } from "../../../utlity/types";
+import { useDispatch, useSelector } from "react-redux";
+import { AppDispatch, RootState } from "../../../store/store";
+import { IoMdClose } from "react-icons/io";
+import getMinRoutingOrder from "../../../utlity/commonUtils";
+import { addRecipientAsync, recipientType, removeAllRecipients, removeRecipientAsync } from "../../../store/slices/selectedRecipientsSlice";
+import { UserState } from "../../../store/slices/userSlice";
+import api from "../../../config/api";
+import { FormSubmitInt } from "./ProcessStepOne";
+
+interface RecipientsConIntProps {
+    transactionTemplateToggle: string;
+    accountId: string | undefined;
+    transactionId: string | undefined;
+    userData: UserState;
+    isModal: boolean;
+    submitError?: FormSubmitInt;
+    setEditRecipientsModal?: React.Dispatch<boolean>
+}
+
+const RecipientsCon: React.FC<RecipientsConIntProps> = ({ transactionTemplateToggle, accountId, transactionId, userData, submitError, isModal = true, setEditRecipientsModal }) => {
+    const dispatch = useDispatch<AppDispatch>()
+
+    const topRef = useRef<HTMLDivElement | null>(null);
+    const signType = useParams<{ signType: string }>().signType;
+    const [showSelfSignWarnModal, setShowSelfSignWarnModal] = useState(false)
+    const [editRecipient, setEditRecipient] = useState({})
+    const [editRecipientCurrentEmail, setEditRecipientCurrentEmail] = useState('')
+    const [editCase, setEditCase] = useState<string>("")
+
+    const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients)
+
+    const globalLoader = useSelector((state: RootState) => state.loader)
+
+
+    // Handle Recipient Process - START
+    const handleRecipientAdd = async () => {
+        let minRoutingOrder = getMinRoutingOrder({ recipients: selectedRecipients });
+
+        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,
+            type: recipient.type,
+            firstName: recipient.firstName,
+            lastName: recipient.lastName,
+            authType: "NONE",
+            deliveryMethod: "EMAIL",
+            email: recipient.email,
+            hostName: recipient.hostName,
+            hostEmail: recipient.hostEmail,
+            company: "",
+            title: "",
+            website: "",
+            phone: "",
+            accessCode: "",
+            accessCodeDelivery: true,
+            language: "en",
+            name: `${recipient.firstName} ${recipient.lastName}`,
+            roleName: recipient.roleName,
+            allowSenderToEdit: recipient.allowSenderToEdit,
+            allowSenderToDelete: recipient.allowSenderToDelete,
+        }));
+
+        let recipientsDataTemp = recipientsData;
+        let recipientId = null;
+
+        if (signType === SignTypeEnum.selfSign) {
+            dispatch(removeAllRecipients());
+            await Promise.all(
+                selectedRecipients.map((recipient) => dispatch(removeRecipientAsync({
+                    recipientId: recipient.id,
+                    accountId,
+                    transactionId,
+                    email: recipient.email,
+                })))
+            );
+
+            recipientsDataTemp = [{
+                id: null,
+                routingOrder: 1,
+                provideOwnTags: true,
+                type: recipientType.SIGNER,
+                firstName: userData.firstName,
+                lastName: userData.lastName,
+                authType: "NONE",
+                deliveryMethod: "EMAIL",
+                email: userData.email,
+                hostName: "",
+                hostEmail: "",
+                company: "",
+                title: "",
+                website: "",
+                phone: "",
+                accessCode: "",
+                accessCodeDelivery: true,
+                language: userData.language ? userData.language : "en",
+                name: `${userData.firstName} ${userData.lastName}`,
+                roleName: "",
+                allowSenderToEdit: true,
+                allowSenderToDelete: true,
+            }]
+
+            try {
+                const basePath = `/api/accounts/${accountId}/transactions/${transactionId}/recipients`;
+                const res = await api.post(basePath, recipientsDataTemp)
+                recipientId = res.data[0].id;
+            } catch (error) {
+                console.log("Error Creating Self Sign Recipient", error.message)
+            }
+
+        } else {
+            if (!accountId || !transactionId) return;
+            dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
+        }
+    }
+
+    // Handle Recipient Process - END
+
+    return (
+        <>
+            {(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>
+                        <IoMdClose
+                            onClick={() => {
+                                handleRecipientAdd()
+                                setEditRecipientsModal(false)
+                            }}
+                            className="text-xl text-slate-400 cursor-pointer" />
+                    </div>}
+                    <div id="recipient_cards_con"
+                        className={`${submitError && submitError.showError && (submitError.duplicateEmailSameRoutingOrder || submitError.invalidRecipientLastName || submitError.invalidRecipientEmail) ? "border border-red-500 rounded-sm p-2 ring-2 ring-red-300" : ""}`}>
+                        <RecipientCards
+                            userEmail={userData.email}
+                            transactionTemplateToggle={transactionTemplateToggle}
+                            setEditRecipient={setEditRecipient}
+                            setEditCase={setEditCase}
+                            editRecipient={editRecipient}
+                            setEditRecipientCurrentEmail={setEditRecipientCurrentEmail}
+                            editRecipientCurrentEmail={editRecipientCurrentEmail}
+                        />
+                        {submitError && submitError.showError && <p
+                            className="text-xs text-right px-2 pt-2 text-red-500">
+                            {submitError.duplicateEmailSameRoutingOrder && `Each Signing order must have unique emails, ${submitError && submitError.email}`}
+                            {!submitError.recipients && !submitError.duplicateEmailSameRoutingOrder && submitError.invalidRecipientEmail && `Invalid email address, ${submitError && submitError.email}`}
+                            {!submitError.recipients && !submitError.duplicateEmailSameRoutingOrder && submitError.invalidRecipientLastName && `Last name cannot be empty.`}
+                        </p>}
+                    </div>
+                    <div
+                        ref={topRef}
+                        className={`relative mt-4 mb-2 w-full bg-[var(--mainViewBg)] ${globalLoader.isLoading ? 'pointer-events-none' : ''} ${submitError && submitError.showError && submitError.recipients ? "border border-red-500 rounded-sm p-2 ring-2 ring-red-300" : ""}`}
+                    >
+                        <RecipientAddCard
+                            transactionTemplateToggle={transactionTemplateToggle}
+                            editRecipient={editRecipient}
+                            editCase={editCase}
+                            setEditRecipient={setEditRecipient}
+                            setEditCase={setEditCase}
+                            topRef={topRef}
+                            setEditRecipientCurrentEmail={setEditRecipientCurrentEmail} />
+
+                        {submitError && submitError.showError && <p
+                            className="text-xs text-right px-2 pt-2 text-red-500">
+                            {submitError.recipients && "At least one recipient is required."}
+                        </p>}
+                    </div>
+                </div>
+            </>}
+        </>
+    )
+}
+
+export default RecipientsCon
\ No newline at end of file
diff --git a/src/components/process/processStepOne/SelectedDocuments.tsx b/src/components/process/processStepOne/SelectedDocuments.tsx
index 6dbf3b3..65aad90 100644
--- a/src/components/process/processStepOne/SelectedDocuments.tsx
+++ b/src/components/process/processStepOne/SelectedDocuments.tsx
@@ -1,35 +1,25 @@
 import { useState, useRef, useEffect } from 'react';
 import { ReactSortable } from 'react-sortablejs';
-import { RiDraggable } from "react-icons/ri";
-import { FaFileAlt, FaPlus, FaGoogleDrive, FaDropbox, FaMicrosoft, FaCloudUploadAlt } from "react-icons/fa";
+import { FaPlus, FaGoogleDrive, FaDropbox, FaMicrosoft, FaCloudUploadAlt } from "react-icons/fa";
 import { useDispatch, useSelector } from 'react-redux';
 // import { setSelectedDocuments } from '../../../store/slices/selectedDocsSlice';
-import { setDocuments, uploadDocuments } from '../../../store/slices/documentSlice';
-import { RootState, AppDispatch } from '../../../store/store';
+import { clearDocumentUploadErrors, DocumentErrorEnum, setDocuments, uploadDocuments } from '../../../store/slices/documentSlice';
+import { RootState } from '../../../store/store';
 import { IoMdClose } from 'react-icons/io';
-import { Bounce, toast } from "react-toastify";
-import api from '../../../config/api';
 import DocumentCard from './DocumentCard';
 import { useParams } from 'react-router-dom';
-import { toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice';
+import { TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice';
 
 
-const SelectedDocuments = ({ transactionTemplateToggle }) => {
-    // let transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS;
-
-    // const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
-    //  await sleep(5000);
+interface SelectedDocumentsIntProps {
+    transactionTemplateToggle: TRANSACTION_TEMPLATE_TOGGLE
+}
 
+const SelectedDocuments: React.FC<SelectedDocumentsIntProps> = ({ transactionTemplateToggle }) => {
     const documents = useSelector((state: RootState) => state.documents.documents);
+    const errorDocuments = useSelector((state: RootState) => state.documents.error);
     const docCount = documents.length;
 
-    useEffect(() => {
-
-        console.log("Documents updated:", documents);
-    }, [documents]);
-
-
-
     const templateId = useParams<{ templateId: string }>().templateId;
     let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
 
@@ -62,15 +52,19 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
         dispatch(uploadDocuments({ formData, accountId, transactionId }))
             .unwrap()
             .then((res) => {
-                toast.dismiss();
                 setFiles([]);
-                setModalOpen(false);
             })
             .catch((err) => {
                 console.error("Upload failed", err);
             });
     };
 
+    useEffect(() => {
+        if (isModalOpen) {
+            if (errorDocuments[DocumentErrorEnum.FILE_SIZE_EXCEEDED].length === 0 && errorDocuments[DocumentErrorEnum.UNSUPPORTED_DOC_TYPE].length === 0) setModalOpen(false);
+        }
+    }, [documents])
+
     const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const selectedFiles = e.target.files ? Array.from(e.target.files) : [];
         if (selectedFiles.length > 0) {
@@ -90,36 +84,39 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
 
     // Get proper Tailwind class names for upload card span
     const getUploadCardSpanClass = () => {
-  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";
-  }
+        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";
+        }
 
-  switch (docCount) {
-    case 1:
-      return "col-span-1 sm:col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4";
-    case 2:
-      return "col-span-1 sm:col-span-1 md:col-span-1 lg:col-span-2 xl:col-span-3";
-    case 3:
-      return "col-span-1 sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-2";
-    case 4:
-      return "col-span-1"; // balanced
-    default:
-      return "col-span-1";
-  }
-};
+        switch (docCount) {
+            case 1:
+                return "col-span-1 sm:col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4";
+            case 2:
+                return "col-span-1 sm:col-span-1 md:col-span-1 lg:col-span-2 xl:col-span-3";
+            case 3:
+                return "col-span-1 sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-2";
+            case 4:
+                return "col-span-1"; // balanced
+            default:
+                return "col-span-1";
+        }
+    };
 
 
 
     // Calculate how many documents should be in the first row
-    const getFirstRowDocCount = () => {
-        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
-    };
+    // const getFirstRowDocCount = () => {
+    //     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
+    // };
 
-    const firstRowDocCount = getFirstRowDocCount();
-    const remainingDocs = Math.max(0, docCount - firstRowDocCount);
+    // const firstRowDocCount = getFirstRowDocCount();
+    // const remainingDocs = Math.max(0, docCount - firstRowDocCount);
+
+
+    // console.log(errorDocuments, "errorDocuments Line 121")
 
     return (
         <>
@@ -127,23 +124,38 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
             <div className="space-y-3">
                 <div
                     id="upload-doc-step-one"
-                    className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-5 gap-2"
+                    className=""
                 >
                     {/* Upload Document Card */}
                     <div
                         onClick={() => setModalOpen(true)}
-                        className={`${getUploadCardSpanClass()} cursor-pointer h-[170px] flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-xl bg-white hover:bg-gray-50 transition shadow-sm hover:shadow-md`}
+                        onDragOver={(e) => e.preventDefault()}
+                        onDrop={handleDrop}
+                        className={`${getUploadCardSpanClass()} cursor-pointer h-full flex flex-col items-center justify-center border-1 border-dashed border-gray-300 rounded-xl bg-white hover:bg-gray-50 transition`}
                     >
-                        <FaPlus className="text-[var(--primary)] text-3xl mb-2" />
-                        <p className="text-sm text-gray-600 text-center px-2">Upload Document</p>
+                        {/* Upload icon */}
+                        <svg className="mt-8" width="44" height="46" viewBox="0 0 62 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M33.1043 45.9303V32.8347H41.8347L30.9217 19.739L20.0087 32.8347H28.7391V45.9303H17.8261V45.8212C17.4594 45.843 17.1102 45.9303 16.7348 45.9303C12.3933 45.9303 8.22964 44.2057 5.15976 41.1358C2.08988 38.0659 0.365234 33.9022 0.365234 29.5608C0.365234 21.1621 6.71661 14.3175 14.8665 13.3789C15.581 9.64361 17.5749 6.27402 20.505 3.84972C23.4352 1.42542 27.1186 0.0979427 30.9217 0.0956116C34.7253 0.0977141 38.4093 1.42501 41.3402 3.84927C44.2712 6.27352 46.2659 9.64323 46.9813 13.3789C55.1311 14.3175 61.4738 21.1621 61.4738 29.5608C61.4738 33.9022 59.7491 38.0659 56.6793 41.1358C53.6094 44.2057 49.4457 45.9303 45.1042 45.9303C44.7376 45.9303 44.384 45.843 44.0129 45.8212V45.9303H33.1043Z" fill="#34BEFF" />
+                        </svg>
+
+                        {/* Compact text | Upload or drag & drop files */}
+                        <p className="mt-2.5">
+                            <svg width="230" height="24" viewBox="0 0 314 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M8.386 19.312C6.826 19.312 5.48267 19.0607 4.356 18.558C3.22933 18.0553 2.36267 17.2927 1.756 16.27C1.16667 15.23 0.872 13.9387 0.872 12.396V1.164H4.252V12.292C4.252 13.6613 4.60733 14.7013 5.318 15.412C6.046 16.1053 7.06867 16.452 8.386 16.452C9.70333 16.452 10.726 16.1053 11.454 15.412C12.1993 14.7013 12.572 13.6613 12.572 12.292V1.164H15.952V12.396C15.952 13.9387 15.6487 15.23 15.042 16.27C14.4353 17.2927 13.5687 18.0553 12.442 18.558C11.3153 19.0607 9.96333 19.312 8.386 19.312ZM19.5045 23.498V5.324H22.1305L22.3905 7.144H22.5725C23.0231 6.43333 23.6125 5.90467 24.3405 5.558C25.0685 5.194 25.8745 5.012 26.7585 5.012C27.8851 5.012 28.8471 5.26333 29.6445 5.766C30.4591 6.26867 31.0831 7.04867 31.5165 8.106C31.9671 9.16333 32.1925 10.524 32.1925 12.188C32.1925 13.8173 31.9671 15.1607 31.5165 16.218C31.0658 17.2753 30.4418 18.0553 29.6445 18.558C28.8645 19.0607 27.9631 19.312 26.9405 19.312C26.3165 19.312 25.7445 19.2427 25.2245 19.104C24.7045 18.9653 24.2451 18.7573 23.8465 18.48C23.4478 18.1853 23.1098 17.83 22.8325 17.414H22.6765V23.498H19.5045ZM25.7705 16.582C26.5505 16.582 27.1658 16.4347 27.6165 16.14C28.0845 15.828 28.4138 15.36 28.6045 14.736C28.8125 14.112 28.9165 13.3233 28.9165 12.37V12.006C28.9165 11.0353 28.8125 10.238 28.6045 9.614C28.4138 8.97267 28.0845 8.50467 27.6165 8.21C27.1658 7.898 26.5505 7.742 25.7705 7.742C25.0598 7.742 24.4705 7.90667 24.0025 8.236C23.5518 8.56533 23.2138 9.05067 22.9885 9.692C22.7805 10.316 22.6765 11.0873 22.6765 12.006V12.318C22.6765 12.994 22.7371 13.6007 22.8585 14.138C22.9798 14.658 23.1618 15.1 23.4045 15.464C23.6645 15.828 23.9851 16.1053 24.3665 16.296C24.7651 16.4867 25.2331 16.582 25.7705 16.582ZM34.8912 19V0.201999H38.0632V19H34.8912ZM47.526 19.312C46.0353 19.312 44.7873 19.0607 43.782 18.558C42.7766 18.038 42.0226 17.2493 41.52 16.192C41.0173 15.1347 40.766 13.7913 40.766 12.162C40.766 10.5153 41.0173 9.172 41.52 8.132C42.0226 7.07467 42.7766 6.29467 43.782 5.792C44.7873 5.272 46.0353 5.012 47.526 5.012C49.034 5.012 50.282 5.272 51.27 5.792C52.2753 6.29467 53.0293 7.07467 53.532 8.132C54.0346 9.172 54.286 10.5153 54.286 12.162C54.286 13.7913 54.0346 15.1347 53.532 16.192C53.0293 17.2493 52.2753 18.038 51.27 18.558C50.282 19.0607 49.034 19.312 47.526 19.312ZM47.526 16.712C48.358 16.712 49.0253 16.556 49.528 16.244C50.048 15.9147 50.4206 15.4293 50.646 14.788C50.8886 14.1293 51.01 13.3147 51.01 12.344V11.98C51.01 11.0093 50.8886 10.2033 50.646 9.562C50.4206 8.90333 50.048 8.418 49.528 8.106C49.0253 7.77667 48.358 7.612 47.526 7.612C46.694 7.612 46.018 7.77667 45.498 8.106C44.9953 8.418 44.6226 8.90333 44.38 9.562C44.1546 10.2033 44.042 11.0093 44.042 11.98V12.344C44.042 13.3147 44.1546 14.1293 44.38 14.788C44.6226 15.4293 44.9953 15.9147 45.498 16.244C46.018 16.556 46.694 16.712 47.526 16.712ZM60.491 19.312C60.1097 19.312 59.6677 19.26 59.165 19.156C58.6797 19.0693 58.203 18.896 57.735 18.636C57.2843 18.376 56.9117 17.9947 56.617 17.492C56.3223 16.972 56.175 16.296 56.175 15.464C56.175 14.528 56.383 13.7567 56.799 13.15C57.215 12.526 57.7957 12.0407 58.541 11.694C59.3037 11.33 60.205 11.0787 61.245 10.94C62.3023 10.784 63.455 10.706 64.703 10.706V9.588C64.703 9.18933 64.6423 8.834 64.521 8.522C64.3997 8.21 64.1743 7.96733 63.845 7.794C63.533 7.60333 63.0563 7.508 62.415 7.508C61.7737 7.508 61.271 7.586 60.907 7.742C60.543 7.898 60.2917 8.08867 60.153 8.314C60.0143 8.53933 59.945 8.77333 59.945 9.016V9.38H56.877C56.8597 9.29333 56.851 9.20667 56.851 9.12C56.851 9.03333 56.851 8.92933 56.851 8.808C56.851 8.028 57.085 7.352 57.553 6.78C58.021 6.208 58.671 5.77467 59.503 5.48C60.335 5.168 61.297 5.012 62.389 5.012C63.637 5.012 64.6597 5.18533 65.457 5.532C66.2717 5.87867 66.8783 6.37267 67.277 7.014C67.6757 7.65533 67.875 8.43533 67.875 9.354V15.802C67.875 16.1313 67.9703 16.3653 68.161 16.504C68.3517 16.6427 68.5597 16.712 68.785 16.712H69.617V18.896C69.4437 18.9653 69.1923 19.0433 68.863 19.13C68.5337 19.234 68.1263 19.286 67.641 19.286C67.1903 19.286 66.783 19.208 66.419 19.052C66.0723 18.9133 65.7777 18.7053 65.535 18.428C65.2923 18.1507 65.119 17.8213 65.015 17.44H64.859C64.5643 17.804 64.209 18.1333 63.793 18.428C63.3943 18.7053 62.9177 18.922 62.363 19.078C61.8257 19.234 61.2017 19.312 60.491 19.312ZM61.453 16.712C61.973 16.712 62.4323 16.634 62.831 16.478C63.247 16.322 63.585 16.1053 63.845 15.828C64.1223 15.5507 64.3303 15.2127 64.469 14.814C64.625 14.4153 64.703 13.982 64.703 13.514V12.89C63.7497 12.89 62.8657 12.9507 62.051 13.072C61.2537 13.1933 60.6123 13.4187 60.127 13.748C59.659 14.0773 59.425 14.5453 59.425 15.152C59.425 15.464 59.4943 15.7413 59.633 15.984C59.789 16.2093 60.0143 16.3913 60.309 16.53C60.621 16.6513 61.0023 16.712 61.453 16.712ZM76.1863 19.312C75.0769 19.312 74.1149 19.0607 73.3003 18.558C72.4856 18.0553 71.8529 17.2753 71.4023 16.218C70.9689 15.1607 70.7523 13.8 70.7523 12.136C70.7523 10.4893 70.9776 9.146 71.4283 8.106C71.8789 7.04867 72.5029 6.26867 73.3003 5.766C74.0976 5.26333 74.9989 5.012 76.0043 5.012C76.6283 5.012 77.2003 5.08133 77.7203 5.22C78.2403 5.35867 78.6996 5.57533 79.0983 5.87C79.4969 6.14733 79.8349 6.494 80.1123 6.91H80.2683V0.201999H83.4403V19H80.8143L80.5543 17.18H80.3723C79.9389 17.8907 79.3496 18.428 78.6043 18.792C77.8763 19.1387 77.0703 19.312 76.1863 19.312ZM77.1743 16.582C77.9023 16.582 78.4916 16.4173 78.9423 16.088C79.3929 15.7587 79.7223 15.282 79.9303 14.658C80.1556 14.034 80.2683 13.2713 80.2683 12.37V12.032C80.2683 11.356 80.2076 10.7493 80.0863 10.212C79.9649 9.67467 79.7743 9.224 79.5143 8.86C79.2716 8.496 78.9509 8.21867 78.5523 8.028C78.1709 7.83733 77.7116 7.742 77.1743 7.742C76.3943 7.742 75.7703 7.898 75.3023 8.21C74.8516 8.50467 74.5223 8.97267 74.3143 9.614C74.1236 10.238 74.0283 11.0353 74.0283 12.006V12.37C74.0283 13.3233 74.1236 14.112 74.3143 14.736C74.5223 15.36 74.8516 15.828 75.3023 16.14C75.7703 16.4347 76.3943 16.582 77.1743 16.582ZM98.1041 19.312C96.6134 19.312 95.3654 19.0607 94.3601 18.558C93.3547 18.038 92.6007 17.2493 92.0981 16.192C91.5954 15.1347 91.3441 13.7913 91.3441 12.162C91.3441 10.5153 91.5954 9.172 92.0981 8.132C92.6007 7.07467 93.3547 6.29467 94.3601 5.792C95.3654 5.272 96.6134 5.012 98.1041 5.012C99.6121 5.012 100.86 5.272 101.848 5.792C102.853 6.29467 103.607 7.07467 104.11 8.132C104.613 9.172 104.864 10.5153 104.864 12.162C104.864 13.7913 104.613 15.1347 104.11 16.192C103.607 17.2493 102.853 18.038 101.848 18.558C100.86 19.0607 99.6121 19.312 98.1041 19.312ZM98.1041 16.712C98.9361 16.712 99.6034 16.556 100.106 16.244C100.626 15.9147 100.999 15.4293 101.224 14.788C101.467 14.1293 101.588 13.3147 101.588 12.344V11.98C101.588 11.0093 101.467 10.2033 101.224 9.562C100.999 8.90333 100.626 8.418 100.106 8.106C99.6034 7.77667 98.9361 7.612 98.1041 7.612C97.2721 7.612 96.5961 7.77667 96.0761 8.106C95.5734 8.418 95.2007 8.90333 94.9581 9.562C94.7327 10.2033 94.6201 11.0093 94.6201 11.98V12.344C94.6201 13.3147 94.7327 14.1293 94.9581 14.788C95.2007 15.4293 95.5734 15.9147 96.0761 16.244C96.5961 16.556 97.2721 16.712 98.1041 16.712ZM107.559 19V5.324H110.211L110.471 7.482H110.653C110.826 7.04867 111.034 6.65 111.277 6.286C111.537 5.90467 111.866 5.60133 112.265 5.376C112.664 5.13333 113.149 5.012 113.721 5.012C113.998 5.012 114.25 5.038 114.475 5.09C114.718 5.142 114.9 5.194 115.021 5.246V8.236H114.059C113.522 8.236 113.045 8.314 112.629 8.47C112.213 8.60867 111.858 8.834 111.563 9.146C111.286 9.458 111.078 9.848 110.939 10.316C110.8 10.784 110.731 11.33 110.731 11.954V19H107.559ZM126.434 19.312C125.325 19.312 124.363 19.0607 123.548 18.558C122.734 18.0553 122.101 17.2753 121.65 16.218C121.217 15.1607 121 13.8 121 12.136C121 10.4893 121.226 9.146 121.676 8.106C122.127 7.04867 122.751 6.26867 123.548 5.766C124.346 5.26333 125.247 5.012 126.252 5.012C126.876 5.012 127.448 5.08133 127.968 5.22C128.488 5.35867 128.948 5.57533 129.346 5.87C129.745 6.14733 130.083 6.494 130.36 6.91H130.516V0.201999H133.688V19H131.062L130.802 17.18H130.62C130.187 17.8907 129.598 18.428 128.852 18.792C128.124 19.1387 127.318 19.312 126.434 19.312ZM127.422 16.582C128.15 16.582 128.74 16.4173 129.19 16.088C129.641 15.7587 129.97 15.282 130.178 14.658C130.404 14.034 130.516 13.2713 130.516 12.37V12.032C130.516 11.356 130.456 10.7493 130.334 10.212C130.213 9.67467 130.022 9.224 129.762 8.86C129.52 8.496 129.199 8.21867 128.8 8.028C128.419 7.83733 127.96 7.742 127.422 7.742C126.642 7.742 126.018 7.898 125.55 8.21C125.1 8.50467 124.77 8.97267 124.562 9.614C124.372 10.238 124.276 11.0353 124.276 12.006V12.37C124.276 13.3233 124.372 14.112 124.562 14.736C124.77 15.36 125.1 15.828 125.55 16.14C126.018 16.4347 126.642 16.582 127.422 16.582ZM137.063 19V5.324H139.715L139.975 7.482H140.157C140.33 7.04867 140.538 6.65 140.781 6.286C141.041 5.90467 141.37 5.60133 141.769 5.376C142.168 5.13333 142.653 5.012 143.225 5.012C143.502 5.012 143.754 5.038 143.979 5.09C144.222 5.142 144.404 5.194 144.525 5.246V8.236H143.563C143.026 8.236 142.549 8.314 142.133 8.47C141.717 8.60867 141.362 8.834 141.067 9.146C140.79 9.458 140.582 9.848 140.443 10.316C140.304 10.784 140.235 11.33 140.235 11.954V19H137.063ZM149.739 19.312C149.358 19.312 148.916 19.26 148.413 19.156C147.928 19.0693 147.451 18.896 146.983 18.636C146.532 18.376 146.16 17.9947 145.865 17.492C145.57 16.972 145.423 16.296 145.423 15.464C145.423 14.528 145.631 13.7567 146.047 13.15C146.463 12.526 147.044 12.0407 147.789 11.694C148.552 11.33 149.453 11.0787 150.493 10.94C151.55 10.784 152.703 10.706 153.951 10.706V9.588C153.951 9.18933 153.89 8.834 153.769 8.522C153.648 8.21 153.422 7.96733 153.093 7.794C152.781 7.60333 152.304 7.508 151.663 7.508C151.022 7.508 150.519 7.586 150.155 7.742C149.791 7.898 149.54 8.08867 149.401 8.314C149.262 8.53933 149.193 8.77333 149.193 9.016V9.38H146.125C146.108 9.29333 146.099 9.20667 146.099 9.12C146.099 9.03333 146.099 8.92933 146.099 8.808C146.099 8.028 146.333 7.352 146.801 6.78C147.269 6.208 147.919 5.77467 148.751 5.48C149.583 5.168 150.545 5.012 151.637 5.012C152.885 5.012 153.908 5.18533 154.705 5.532C155.52 5.87867 156.126 6.37267 156.525 7.014C156.924 7.65533 157.123 8.43533 157.123 9.354V15.802C157.123 16.1313 157.218 16.3653 157.409 16.504C157.6 16.6427 157.808 16.712 158.033 16.712H158.865V18.896C158.692 18.9653 158.44 19.0433 158.111 19.13C157.782 19.234 157.374 19.286 156.889 19.286C156.438 19.286 156.031 19.208 155.667 19.052C155.32 18.9133 155.026 18.7053 154.783 18.428C154.54 18.1507 154.367 17.8213 154.263 17.44H154.107C153.812 17.804 153.457 18.1333 153.041 18.428C152.642 18.7053 152.166 18.922 151.611 19.078C151.074 19.234 150.45 19.312 149.739 19.312ZM150.701 16.712C151.221 16.712 151.68 16.634 152.079 16.478C152.495 16.322 152.833 16.1053 153.093 15.828C153.37 15.5507 153.578 15.2127 153.717 14.814C153.873 14.4153 153.951 13.982 153.951 13.514V12.89C152.998 12.89 152.114 12.9507 151.299 13.072C150.502 13.1933 149.86 13.4187 149.375 13.748C148.907 14.0773 148.673 14.5453 148.673 15.152C148.673 15.464 148.742 15.7413 148.881 15.984C149.037 16.2093 149.262 16.3913 149.557 16.53C149.869 16.6513 150.25 16.712 150.701 16.712ZM162.938 23.732C162.332 23.732 161.76 23.6107 161.222 23.368C160.685 23.1253 160.252 22.7613 159.922 22.276C159.593 21.808 159.428 21.2273 159.428 20.534C159.428 19.7713 159.645 19.1733 160.078 18.74C160.529 18.2893 161.023 17.9513 161.56 17.726C161.162 17.518 160.832 17.2407 160.572 16.894C160.33 16.5473 160.208 16.1313 160.208 15.646C160.208 14.9873 160.451 14.4673 160.936 14.086C161.422 13.6873 161.976 13.4273 162.6 13.306C161.959 12.9073 161.465 12.396 161.118 11.772C160.789 11.148 160.624 10.4373 160.624 9.64C160.624 8.68667 160.85 7.872 161.3 7.196C161.768 6.50267 162.444 5.96533 163.328 5.584C164.212 5.20267 165.278 5.012 166.526 5.012C167.029 5.012 167.514 5.04667 167.982 5.116C168.45 5.18533 168.875 5.28933 169.256 5.428C169.863 5.064 170.279 4.65667 170.504 4.206C170.73 3.738 170.851 3.35667 170.868 3.062H173.962C173.962 3.66867 173.841 4.206 173.598 4.674C173.373 5.142 173.052 5.532 172.636 5.844C172.22 6.13867 171.718 6.35533 171.128 6.494C171.562 6.87533 171.891 7.33467 172.116 7.872C172.342 8.40933 172.454 8.99867 172.454 9.64C172.454 10.5933 172.229 11.4167 171.778 12.11C171.345 12.8033 170.695 13.3407 169.828 13.722C168.979 14.1033 167.93 14.294 166.682 14.294H164.576C164.212 14.294 163.926 14.372 163.718 14.528C163.528 14.684 163.432 14.9007 163.432 15.178C163.432 15.4033 163.519 15.6027 163.692 15.776C163.883 15.9493 164.143 16.036 164.472 16.036H170.452C171.475 16.036 172.316 16.374 172.974 17.05C173.65 17.7087 173.988 18.558 173.988 19.598C173.988 20.378 173.78 21.08 173.364 21.704C172.966 22.328 172.402 22.822 171.674 23.186C170.946 23.55 170.097 23.732 169.126 23.732H162.938ZM164.082 21.444H169.1C169.43 21.444 169.716 21.3833 169.958 21.262C170.218 21.158 170.418 21.002 170.556 20.794C170.712 20.586 170.79 20.352 170.79 20.092C170.79 19.6413 170.643 19.3033 170.348 19.078C170.071 18.8527 169.724 18.74 169.308 18.74H164.082C163.666 18.74 163.32 18.8613 163.042 19.104C162.765 19.364 162.626 19.6933 162.626 20.092C162.626 20.4907 162.756 20.8113 163.016 21.054C163.294 21.314 163.649 21.444 164.082 21.444ZM166.552 12.058C167.471 12.058 168.156 11.85 168.606 11.434C169.074 11.0007 169.308 10.4027 169.308 9.64C169.308 8.87733 169.074 8.288 168.606 7.872C168.156 7.456 167.471 7.248 166.552 7.248C165.634 7.248 164.94 7.456 164.472 7.872C164.022 8.288 163.796 8.87733 163.796 9.64C163.796 10.1427 163.892 10.576 164.082 10.94C164.29 11.304 164.594 11.5813 164.992 11.772C165.408 11.9627 165.928 12.058 166.552 12.058ZM188.029 19.312C186.642 19.312 185.411 19.1127 184.337 18.714C183.279 18.298 182.447 17.7087 181.841 16.946C181.234 16.1833 180.931 15.2733 180.931 14.216C180.931 12.9853 181.26 12.0233 181.919 11.33C182.595 10.6193 183.435 10.1253 184.441 9.848V9.744C183.557 9.36267 182.82 8.87733 182.231 8.288C181.641 7.69867 181.347 6.84933 181.347 5.74C181.347 4.68267 181.633 3.79 182.205 3.062C182.794 2.334 183.609 1.788 184.649 1.424C185.706 1.04267 186.928 0.852 188.315 0.852C189.649 0.852 190.819 1.05133 191.825 1.45C192.83 1.84867 193.619 2.42067 194.191 3.166C194.763 3.894 195.049 4.752 195.049 5.74V6.39H191.877V5.974C191.877 5.402 191.729 4.934 191.435 4.57C191.157 4.18867 190.75 3.91133 190.213 3.738C189.675 3.54733 189.025 3.452 188.263 3.452C187.691 3.452 187.171 3.51267 186.703 3.634C186.252 3.738 185.871 3.90267 185.559 4.128C185.247 4.35333 185.004 4.63067 184.831 4.96C184.675 5.28933 184.597 5.67067 184.597 6.104C184.597 6.65867 184.735 7.12667 185.013 7.508C185.307 7.88933 185.689 8.17533 186.157 8.366C186.625 8.55667 187.127 8.652 187.665 8.652H189.407V11.252H187.743C187.136 11.252 186.555 11.33 186.001 11.486C185.463 11.6247 185.03 11.8847 184.701 12.266C184.371 12.6473 184.207 13.202 184.207 13.93C184.207 14.5713 184.363 15.1 184.675 15.516C184.987 15.9147 185.429 16.218 186.001 16.426C186.59 16.6167 187.292 16.712 188.107 16.712C188.956 16.712 189.658 16.608 190.213 16.4C190.767 16.1747 191.183 15.8453 191.461 15.412C191.738 14.9787 191.877 14.4587 191.877 13.852V8.652H197.441V11.252H195.049V13.774C195.049 14.8833 194.78 15.854 194.243 16.686C193.723 17.518 192.943 18.168 191.903 18.636C190.863 19.0867 189.571 19.312 188.029 19.312ZM210.147 19.312C209.038 19.312 208.076 19.0607 207.261 18.558C206.447 18.0553 205.814 17.2753 205.363 16.218C204.93 15.1607 204.713 13.8 204.713 12.136C204.713 10.4893 204.939 9.146 205.389 8.106C205.84 7.04867 206.464 6.26867 207.261 5.766C208.059 5.26333 208.96 5.012 209.965 5.012C210.589 5.012 211.161 5.08133 211.681 5.22C212.201 5.35867 212.661 5.57533 213.059 5.87C213.458 6.14733 213.796 6.494 214.073 6.91H214.229V0.201999H217.401V19H214.775L214.515 17.18H214.333C213.9 17.8907 213.311 18.428 212.565 18.792C211.837 19.1387 211.031 19.312 210.147 19.312ZM211.135 16.582C211.863 16.582 212.453 16.4173 212.903 16.088C213.354 15.7587 213.683 15.282 213.891 14.658C214.117 14.034 214.229 13.2713 214.229 12.37V12.032C214.229 11.356 214.169 10.7493 214.047 10.212C213.926 9.67467 213.735 9.224 213.475 8.86C213.233 8.496 212.912 8.21867 212.513 8.028C212.132 7.83733 211.673 7.742 211.135 7.742C210.355 7.742 209.731 7.898 209.263 8.21C208.813 8.50467 208.483 8.97267 208.275 9.614C208.085 10.238 207.989 11.0353 207.989 12.006V12.37C207.989 13.3233 208.085 14.112 208.275 14.736C208.483 15.36 208.813 15.828 209.263 16.14C209.731 16.4347 210.355 16.582 211.135 16.582ZM220.776 19V5.324H223.428L223.688 7.482H223.87C224.043 7.04867 224.251 6.65 224.494 6.286C224.754 5.90467 225.083 5.60133 225.482 5.376C225.881 5.13333 226.366 5.012 226.938 5.012C227.215 5.012 227.467 5.038 227.692 5.09C227.935 5.142 228.117 5.194 228.238 5.246V8.236H227.276C226.739 8.236 226.262 8.314 225.846 8.47C225.43 8.60867 225.075 8.834 224.78 9.146C224.503 9.458 224.295 9.848 224.156 10.316C224.017 10.784 223.948 11.33 223.948 11.954V19H220.776ZM236.026 19.312C234.535 19.312 233.287 19.0607 232.282 18.558C231.277 18.038 230.523 17.2493 230.02 16.192C229.517 15.1347 229.266 13.7913 229.266 12.162C229.266 10.5153 229.517 9.172 230.02 8.132C230.523 7.07467 231.277 6.29467 232.282 5.792C233.287 5.272 234.535 5.012 236.026 5.012C237.534 5.012 238.782 5.272 239.77 5.792C240.775 6.29467 241.529 7.07467 242.032 8.132C242.535 9.172 242.786 10.5153 242.786 12.162C242.786 13.7913 242.535 15.1347 242.032 16.192C241.529 17.2493 240.775 18.038 239.77 18.558C238.782 19.0607 237.534 19.312 236.026 19.312ZM236.026 16.712C236.858 16.712 237.525 16.556 238.028 16.244C238.548 15.9147 238.921 15.4293 239.146 14.788C239.389 14.1293 239.51 13.3147 239.51 12.344V11.98C239.51 11.0093 239.389 10.2033 239.146 9.562C238.921 8.90333 238.548 8.418 238.028 8.106C237.525 7.77667 236.858 7.612 236.026 7.612C235.194 7.612 234.518 7.77667 233.998 8.106C233.495 8.418 233.123 8.90333 232.88 9.562C232.655 10.2033 232.542 11.0093 232.542 11.98V12.344C232.542 13.3147 232.655 14.1293 232.88 14.788C233.123 15.4293 233.495 15.9147 233.998 16.244C234.518 16.556 235.194 16.712 236.026 16.712ZM245.481 23.498V5.324H248.107L248.367 7.144H248.549C249 6.43333 249.589 5.90467 250.317 5.558C251.045 5.194 251.851 5.012 252.735 5.012C253.862 5.012 254.824 5.26333 255.621 5.766C256.436 6.26867 257.06 7.04867 257.493 8.106C257.944 9.16333 258.169 10.524 258.169 12.188C258.169 13.8173 257.944 15.1607 257.493 16.218C257.042 17.2753 256.418 18.0553 255.621 18.558C254.841 19.0607 253.94 19.312 252.917 19.312C252.293 19.312 251.721 19.2427 251.201 19.104C250.681 18.9653 250.222 18.7573 249.823 18.48C249.424 18.1853 249.086 17.83 248.809 17.414H248.653V23.498H245.481ZM251.747 16.582C252.527 16.582 253.142 16.4347 253.593 16.14C254.061 15.828 254.39 15.36 254.581 14.736C254.789 14.112 254.893 13.3233 254.893 12.37V12.006C254.893 11.0353 254.789 10.238 254.581 9.614C254.39 8.97267 254.061 8.50467 253.593 8.21C253.142 7.898 252.527 7.742 251.747 7.742C251.036 7.742 250.447 7.90667 249.979 8.236C249.528 8.56533 249.19 9.05067 248.965 9.692C248.757 10.316 248.653 11.0873 248.653 12.006V12.318C248.653 12.994 248.714 13.6007 248.835 14.138C248.956 14.658 249.138 15.1 249.381 15.464C249.641 15.828 249.962 16.1053 250.343 16.296C250.742 16.4867 251.21 16.582 251.747 16.582ZM266.723 19V7.924H264.747V5.324H266.723V3.582C266.723 2.97533 266.818 2.40333 267.009 1.866C267.217 1.31133 267.572 0.860666 268.075 0.513999C268.577 0.167333 269.279 -0.00600016 270.181 -0.00600016C270.441 -0.00600016 270.701 0.0113329 270.961 0.0459992C271.238 0.0806654 271.498 0.132665 271.741 0.201999C271.983 0.253999 272.191 0.314666 272.365 0.383999V2.594H271.065C270.683 2.594 270.389 2.698 270.181 2.906C269.99 3.09667 269.895 3.38267 269.895 3.764V5.324H272.365V7.924H269.895V19H266.723ZM274.045 3.218V0.201999H277.217V3.218H274.045ZM274.045 19V5.324H277.217V19H274.045ZM280.596 19V0.201999H283.768V19H280.596ZM293.023 19.312C291.567 19.312 290.354 19.0607 289.383 18.558C288.412 18.038 287.684 17.2493 287.199 16.192C286.714 15.1347 286.471 13.7913 286.471 12.162C286.471 10.5153 286.714 9.172 287.199 8.132C287.684 7.07467 288.412 6.29467 289.383 5.792C290.354 5.272 291.567 5.012 293.023 5.012C294.34 5.012 295.441 5.26333 296.325 5.766C297.226 6.25133 297.902 7.00533 298.353 8.028C298.804 9.05067 299.029 10.3767 299.029 12.006V12.942H289.721C289.756 13.7913 289.886 14.5107 290.111 15.1C290.336 15.672 290.683 16.1053 291.151 16.4C291.636 16.6773 292.269 16.816 293.049 16.816C293.448 16.816 293.82 16.764 294.167 16.66C294.514 16.556 294.817 16.4 295.077 16.192C295.337 15.9667 295.536 15.6893 295.675 15.36C295.831 15.0307 295.909 14.6493 295.909 14.216H299.029C299.029 15.0827 298.873 15.8367 298.561 16.478C298.266 17.1193 297.842 17.648 297.287 18.064C296.75 18.48 296.117 18.792 295.389 19C294.661 19.208 293.872 19.312 293.023 19.312ZM289.773 10.706H295.727C295.727 10.134 295.658 9.64867 295.519 9.25C295.398 8.85133 295.216 8.522 294.973 8.262C294.748 8.002 294.47 7.82 294.141 7.716C293.812 7.59467 293.439 7.534 293.023 7.534C292.347 7.534 291.775 7.64667 291.307 7.872C290.856 8.09733 290.51 8.444 290.267 8.912C290.024 9.38 289.86 9.978 289.773 10.706ZM307.051 19.312C306.063 19.312 305.197 19.208 304.451 19C303.706 18.7747 303.082 18.4713 302.579 18.09C302.077 17.7087 301.695 17.2667 301.435 16.764C301.193 16.244 301.071 15.6807 301.071 15.074C301.071 14.9873 301.071 14.9093 301.071 14.84C301.089 14.7707 301.097 14.7187 301.097 14.684H304.217C304.217 14.7187 304.217 14.7533 304.217 14.788C304.217 14.8227 304.217 14.8573 304.217 14.892C304.235 15.36 304.382 15.7413 304.659 16.036C304.937 16.3133 305.301 16.5127 305.751 16.634C306.202 16.7553 306.679 16.816 307.181 16.816C307.632 16.816 308.057 16.7727 308.455 16.686C308.871 16.582 309.209 16.426 309.469 16.218C309.747 15.9927 309.885 15.7067 309.885 15.36C309.885 14.9093 309.712 14.5627 309.365 14.32C309.019 14.0773 308.559 13.878 307.987 13.722C307.433 13.566 306.835 13.4013 306.193 13.228C305.621 13.072 305.049 12.8987 304.477 12.708C303.905 12.5173 303.385 12.2747 302.917 11.98C302.467 11.6853 302.094 11.304 301.799 10.836C301.522 10.368 301.383 9.78733 301.383 9.094C301.383 8.418 301.531 7.82867 301.825 7.326C302.12 6.82333 302.527 6.40733 303.047 6.078C303.567 5.73133 304.183 5.47133 304.893 5.298C305.604 5.12467 306.375 5.038 307.207 5.038C308.022 5.038 308.759 5.12467 309.417 5.298C310.093 5.47133 310.674 5.72267 311.159 6.052C311.662 6.364 312.043 6.754 312.303 7.222C312.581 7.67267 312.719 8.17533 312.719 8.73C312.719 8.85133 312.711 8.97267 312.693 9.094C312.693 9.21533 312.693 9.28467 312.693 9.302H309.599V9.12C309.599 8.79067 309.495 8.51333 309.287 8.288C309.097 8.04533 308.811 7.85467 308.429 7.716C308.065 7.57733 307.606 7.508 307.051 7.508C306.635 7.508 306.271 7.54267 305.959 7.612C305.647 7.68133 305.387 7.77667 305.179 7.898C304.989 8.01933 304.841 8.158 304.737 8.314C304.633 8.47 304.581 8.64333 304.581 8.834C304.581 9.16333 304.711 9.42333 304.971 9.614C305.231 9.80467 305.578 9.96933 306.011 10.108C306.462 10.2467 306.947 10.394 307.467 10.55C308.091 10.7233 308.733 10.9053 309.391 11.096C310.05 11.2693 310.657 11.4947 311.211 11.772C311.783 12.0493 312.243 12.4393 312.589 12.942C312.936 13.4447 313.109 14.112 313.109 14.944C313.109 15.7413 312.953 16.426 312.641 16.998C312.347 17.5527 311.922 18.0033 311.367 18.35C310.83 18.6793 310.189 18.922 309.443 19.078C308.715 19.234 307.918 19.312 307.051 19.312Z" fill="black" />
+                            </svg>
+                        </p>
+
+                        <p className="text-xs text-gray-500 mb-12">
+                            PDF, DOCX (max 10MB)
+                        </p>
                     </div>
 
                     {/* First Row Documents */}
                     <ReactSortable
                         className="contents"
-                        list={documents.slice(0, firstRowDocCount).map((doc) => ({ ...doc }))}
+                        list={documents.map((doc) => ({ ...doc }))}
                         setList={(newState) => {
-                            const updatedDocs = [...newState, ...documents.slice(firstRowDocCount)];
+                            const updatedDocs = [...newState];
                             dispatch(setDocuments(updatedDocs));
                         }}
                         handle=".drag-handle"
@@ -151,8 +163,8 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
                         ghostClass="sortable-ghost"
                         disabled={false}
                     >
-                        {documents.slice(0, firstRowDocCount).map((doc) => (
-                            <div key={doc.id} className="col-span-1 mx-auto">
+                        {documents.map((doc) => (
+                            <div key={doc.id} className="inline-block mr-4 align-top mt-4">
                                 <DocumentCard
                                     id={doc.id}
                                     name={doc.name}
@@ -170,39 +182,7 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
                 </div>
 
                 {/* Additional Rows */}
-                {remainingDocs > 0 && (
-                    <ReactSortable
-                        className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-5 gap-2"
-                        list={documents.slice(firstRowDocCount).map((doc) => ({ ...doc }))}
-                        setList={(newState) => {
-                            const updatedDocs = [
-                                ...documents.slice(0, firstRowDocCount),
-                                ...newState,
-                            ];
-                            dispatch(setDocuments(updatedDocs));
-                        }}
-                        handle=".drag-handle"
-                        animation={200}
-                        ghostClass="sortable-ghost"
-                        disabled={false}
-                    >
-                        {documents.slice(firstRowDocCount).map((doc) => (
-                            <div key={doc.id} className="col-span-1 mx-auto">
-                                <DocumentCard
-                                    id={doc.id}
-                                    name={doc.name}
-                                    isCompleted={
-                                        "isCompleted" in doc ||
-                                            ("status" in doc && doc.status === "UPLOADED")
-                                            ? true
-                                            : false
-                                    }
-                                    transactionTemplateToggle={transactionTemplateToggle}
-                                />
-                            </div>
-                        ))}
-                    </ReactSortable>
-                )}
+
 
                 {/* Modal */}
                 {isModalOpen && (
@@ -211,7 +191,10 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
                             {/* Close Button */}
                             <button
                                 className="absolute top-2 right-2 text-gray-500 hover:text-red-500 transition text-xl bg-white rounded-full p-2"
-                                onClick={() => setModalOpen(false)}
+                                onClick={() => {
+                                    dispatch(clearDocumentUploadErrors())
+                                    setModalOpen(false)
+                                }}
                             >
                                 <IoMdClose />
                             </button>
@@ -253,10 +236,27 @@ const SelectedDocuments = ({ transactionTemplateToggle }) => {
                                             ref={fileInputRef}
                                             className="hidden"
                                             onChange={handleFileChange}
-                                            accept=".pdf,.doc,.docx,.jpg,.png,.jpeg,.txt"
+                                            accept=".pdf"
                                             multiple
                                         />
+                                        <>
+                                            {
+                                                (errorDocuments[DocumentErrorEnum.UNSUPPORTED_DOC_TYPE]).map((docName, indx) => {
+                                                    return (
+                                                        <p className='mt-1 text-sm text-red-500'>Unsupportd File Type for {docName}</p>
+                                                    )
+                                                })
+                                            }
+                                            {
+                                                (errorDocuments[DocumentErrorEnum.FILE_SIZE_EXCEEDED]).map((docName, indx) => {
+                                                    return (
+                                                        <p className='mt-1 text-sm text-red-500'>File Size Exceeded for {docName}</p>
+                                                    )
+                                                })
+                                            }
+                                        </>
                                     </div>
+
                                 )}
                                 {activeTab !== "Upload" && (
                                     <div className="flex items-center justify-center h-full text-gray-400 text-sm">
diff --git a/src/components/process/processStepOne/SelfSignWarnModal.tsx b/src/components/process/processStepOne/SelfSignWarnModal.tsx
index 5fd21dc..8a718ab 100644
--- a/src/components/process/processStepOne/SelfSignWarnModal.tsx
+++ b/src/components/process/processStepOne/SelfSignWarnModal.tsx
@@ -13,7 +13,7 @@ const SelfSignWarnModal = ({ setShowSelfSignWarnModal }: PropsType) => {
             <div className="bg-white rounded-lg shadow-xl p-6 w-100">
                 <h3 className="text-lg font-medium text-gray-800 mb-4">Confirm Self Sign</h3>
                 <p className="text-gray-600 mb-6">
-                    Are you sure you want to proceed with self sign? This will remove all the recipient that you added.
+                    Proceeding with self sign will make you the only signer. Other recipients will not be part of the signing process.
                 </p>
                 <div className="flex justify-end gap-3">
                     <button
@@ -22,7 +22,7 @@ const SelfSignWarnModal = ({ setShowSelfSignWarnModal }: PropsType) => {
                             navigate("./../");
                         }}
 
-                        className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-md transition-colors"
+                        className="px-4 py-2 cursor-pointer text-gray-600 hover:bg-gray-100 rounded-md transition-colors"
                     >
                         No
                     </button>
@@ -31,7 +31,7 @@ const SelfSignWarnModal = ({ setShowSelfSignWarnModal }: PropsType) => {
                             // onConfirm();
                             setShowSelfSignWarnModal(false);
                         }}
-                        className="px-4 py-2 bg-red-600 text-white hover:bg-red-700 rounded-md transition-colors"
+                        className="px-4 py-2 cursor-pointer bg-[var(--mainPrimaryBtn)] text-white rounded-md transition-colors"
                     >
                         Yes
                     </button>
diff --git a/src/components/process/processStepOne/SortableRecipient.tsx b/src/components/process/processStepOne/SortableRecipient.tsx
new file mode 100644
index 0000000..f5d3c2f
--- /dev/null
+++ b/src/components/process/processStepOne/SortableRecipient.tsx
@@ -0,0 +1,49 @@
+import { CSS } from "@dnd-kit/utilities";
+import { useSortable } from "@dnd-kit/sortable";
+import { MdDragIndicator } from "react-icons/md";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../store/store";
+
+const SortableRecipient = ({ recipient, idx, editRecipientCurrentEmail, children }: any) => {
+
+  const selectedRecipientsLen = useSelector((state: RootState) => state.selectedRecipients.recipients.length);
+
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: recipient.id || recipient.uuid });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.6 : 1,
+  };
+ 
+  return (
+    <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" : ""}
+        ${isDragging ? "bg-blue-50 shadow-lg" : ""}
+      `}
+    >
+      {/* Drag handle only on left side */}
+      {selectedRecipientsLen && <div
+        {...attributes}
+        {...listeners}
+        className="cursor-grab text-gray-500 flex items-center pr-2 absolute top-0 left-0 z-50"
+      >
+        <MdDragIndicator className="absolute top-[10px] left-[10px] text-xl text-gray-300" />
+      </div>}
+
+      {/* Your card content */}
+      <div className="flex-1">{children}</div>
+    </div>
+  );
+}
+
+export default SortableRecipient;
\ No newline at end of file
diff --git a/src/components/process/processStepTwo/DocumentContainer.tsx b/src/components/process/processStepTwo/DocumentContainer.tsx
index c53062e..be4ff16 100644
--- a/src/components/process/processStepTwo/DocumentContainer.tsx
+++ b/src/components/process/processStepTwo/DocumentContainer.tsx
@@ -47,6 +47,8 @@ interface DocumentContainerProps {
 let copiedTags: DroppedItem[] = []
 let selectedDoc: { [key: string]: string | null } = { key: null }
 
+const fetchedTags: string[] = []
+
 const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving, setTransactionSaving, isSend, isPreview = false, aId = null, tId = null }) => {
     let transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS;
     const dispatch = useDispatch();
@@ -87,24 +89,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
         hotKey?: string | null;
     }
 
-
-
-    // const hotKeysObjInitial: HotKeysObj = {
-    //     "CtrlA": {
-    //         enabled: false,
-    //         key: null
-    //     },
-    //     "Delete": {
-    //         enabled: false,
-    //         key: null
-    //     },
-    //     "CtrlC": {
-    //         enabled: false,
-    //         key: null,
-    //         tagId: null
-    //     }
-    // }
-
     const hotKeysObjInitial: HotKeysObj = {
         isActive: false,
         key: null,
@@ -112,11 +96,8 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
         hotKey: null
     }
 
-
-
     const [hotKeysObj, setHotKeysObj] = useState<HotKeysObj>(hotKeysObjInitial);
 
-
     useEffect(() => {
         selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }));
         selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
@@ -125,12 +106,21 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
 
     const fetchTags = async () => {
         try {
-            const requests = selectedRecipients.map((recipient) =>
-                api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipient.id}/tags`)
-            );
+            const requests = selectedRecipients.filter((recipient) => {
+                // Adding new rec doesn't have id till we click on IoMdClose or save so removing them and adding rec after click then fetching tags
+                if (!recipient.id) return false;
+                // also checking if have id but tags already fetched so to avoid same req
+                if (fetchedTags.includes(recipient.id)) return false;
+                fetchedTags.push(recipient.id)
+                return true
+            }).map((recipient) => api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipient.id}/tags`));
+
+            if (!requests.length) return
+
             const response = await Promise.all(requests);
             let recTags = {}
             for (const res of response) {
+                if (!res && !res.data) return
                 for (const tag of res.data) {
                     const key = `${tag.documentId}_${tag.pageIndex}`;
                     if (recTags[key]) {
@@ -188,8 +178,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
         // Filter Tags that needs to update
         const updatedData = {}
 
-        // debugger
-
         for (const [recipientId, tags] of Object.entries(tagsData)) {
             // console.log(recipientId, tags, "line 133")
             const updateTags = []
@@ -206,13 +194,20 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
             updatedData[recipientId] = updateTags
         }
 
-        const requests = Object.entries(updatedData).filter(([recipientId, tags]) => {
-            if (tags.length === 0) return false;
-            return api.put(
-                `/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipientId}/tags`,
-                tags
-            );
-        });
+        const requests = Object.entries(updatedData)
+        .filter(([_, tags]) => tags.length > 0) // filter out empty ones
+        .map(([recipientId, tags]) => {
+                const updatedTagsWithNavOrder = tags.map((tag, indx) => ({
+                    ...tag,
+                    navigationOrder: indx + 1,
+                }));
+
+                return api.put(
+                    `/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipientId}/tags`,
+                    updatedTagsWithNavOrder
+                );
+            });
+
 
         try {
             const responses = await Promise.all(requests);
@@ -350,14 +345,11 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
 
         setTimeout(() => {
             const tagIndex = key in droppedItems ? droppedItems[key].length : 0;
-            console.log(tagIndex, "line 307", key);
-            setSelectedTag({ key, tagIndex })
+            setSelectedTag({ key, index: tagIndex })
         }, 0)
     };
     // HANDLE DROP - END
 
-    console.log(selectedTag, "Line 359")
-
     useEffect(() => {
         if (!hotKeysObj.isActive) return
 
@@ -551,6 +543,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
                 selTagKey={selectedTag.key}
                 selTagIndx={selectedTag.index}
                 signClient={false}
+                emptySelectedTag={() => setSelectedTag(null)}
             />
 
             }
diff --git a/src/components/process/processStepTwo/DroppedItemsTagsCon.tsx b/src/components/process/processStepTwo/DroppedItemsTagsCon.tsx
index b465975..db32b33 100644
--- a/src/components/process/processStepTwo/DroppedItemsTagsCon.tsx
+++ b/src/components/process/processStepTwo/DroppedItemsTagsCon.tsx
@@ -48,17 +48,15 @@ const DroppedItemsTagsCon = forwardRef(({
     const positionRef = useRef<{ left: number; top: number }>({ left: 0, top: 0 });
 
     const handleTagClick = (key: string, index: number) => {
-            console.log(index, "line 307", key);
-
         setSelectedTag({ key, index })
     }
 
     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;
-        
+
         (async () => {
             if ("id" in tag) {
                 try {
@@ -70,7 +68,7 @@ const DroppedItemsTagsCon = forwardRef(({
                 }
             }
 
-                
+
 
             setSelectedTag(null);
 
@@ -570,9 +568,9 @@ const DroppedItemsTagsCon = forwardRef(({
                                         <p className='w-2.5 h-2.5 rounded'
                                             style={{ background: selectedRecipient[0]?.color }}
                                         ></p>
-                                        <p
+                                        {/* <p
                                             className=''>{IconComponent}
-                                        </p>
+                                        </p> */}
                                         <p className='capitalize text-ellipsis whitespace-nowrap'>{item.label}</p>
                                         <IoMdClose onClick={(e) => {
                                             e.stopPropagation();
@@ -599,10 +597,11 @@ const DroppedItemsTagsCon = forwardRef(({
                                     style={{ background: selectedRecipient[0]?.color }}
                                 >
                                     <p
-                                        className={`flex justify-center items-center w-full text-xl text-white h-full`}
+                                        className={`flex justify-center items-center w-full text-md capitalize text-white h-full`}
                                     // style={{ color: selectedRecipients[item.recipientIndx]?.color }}
                                     >
                                         {IconComponent}
+                                        {/* {item.label} */}
                                     </p>
                                 </div>
                             }
diff --git a/src/components/process/processStepTwo/FieldList.tsx b/src/components/process/processStepTwo/FieldList.tsx
index 0802340..11c98b2 100644
--- a/src/components/process/processStepTwo/FieldList.tsx
+++ b/src/components/process/processStepTwo/FieldList.tsx
@@ -19,17 +19,62 @@ const handlePointerDown = (event: React.DragEvent<HTMLDivElement>, label: string
         height = innerIconConRect.height + 10
     }
 
-    // Handling Initia Width and height of Some tags - START
-    if (label === TagsTypes.STAMP) {
-        width = 160
-        height = 160
-    } else if (label === TagsTypes.SIGNATURE) {
-        width = 200
-        height = 75
-    } else if (label === TagsTypes.INITIALS) {
-        width = 85
-        height = 75
+    switch (label) {
+        case TagsTypes.STAMP: {
+            width = 160
+            height = 160
+            break;
+        }
+        case TagsTypes.SIGNATURE: {
+            width = 200
+            height = 75
+            break;
+        }
+        case TagsTypes.INITIALS: {
+            width = 85
+            height = 75
+            break;
+        }
+        case TagsTypes.COMPANY: {
+            width = 185
+            height = 35
+            break;
+        }
+        case TagsTypes.EMAIL: {
+            width = 185
+            height = 35
+            break;
+        }
+        case TagsTypes.NAME: {
+            width = 185
+            height = 35
+            break;
+        }
+        case TagsTypes.NUMBER: {
+            width = 185
+            height = 35
+            break;
+        }
+        case TagsTypes.SELECT: {
+            width = 185
+            height = 35
+            break;
+        }
+        case TagsTypes.TEMPORAL: {
+            width = 185
+            height = 35
+            break;
+        }
+        case TagsTypes.TEXT: {
+            width = 185
+            height = 35
+            break;
+        }
     }
+
+
+
+
     // Handling Initia Width and height of Some tags - END
 
     const offsetX = event.clientX - dragElemRect.left;
@@ -110,8 +155,41 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
             });
     }, []);
 
+    // return (
+    //     <div>
+    //         {tagsData.map((field, index) => {
+
+    //             const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />;
+    //             // Optional: skip unknown types
+    //             if (!IconComponent) return null;
+
+    //             return (
+    //                 // <div key={index} draggable={true} onDragStart={(e) => handleDragStart(e, field.label, recipientId)} className="p-1 flex justify-start items-center gap-2 rounded-sm cursor-grab hover:bg-slate-200 transition-all duration-300">
+    //                 <div
+    //                     draggable={true}
+    //                     key={index}
+    //                     onPointerDown={(e) => handlePointerDown(e, field.type.toLowerCase(), recipientId, recipientIndx, field)}
+    //                     className="p-1 flex justify-start items-center gap-2 rounded-sm cursor-grab hover:bg-slate-200 transition-all duration-300">
+    //                     <div
+    //                         className={`p-1 text-sm rounded-sm text-white`}
+    //                         style={{ background: color }}>
+    //                         {IconComponent}
+    //                     </div>
+    //                     <p
+    //                         className="capitalize text-xs">
+    //                         {field.type.toLowerCase()}
+    //                     </p>
+    //                 </div>
+    //             )
+    //         }
+
+
+    //         )}
+    //     </div>
+    // );
+
     return (
-        <div>
+        <div className='flex flex-wrap gap-2 justify-start items-start max-w-[170px] sm:max-w-max'>
             {tagsData.map((field, index) => {
 
                 const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />;
@@ -124,10 +202,14 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
                         draggable={true}
                         key={index}
                         onPointerDown={(e) => handlePointerDown(e, field.type.toLowerCase(), recipientId, recipientIndx, field)}
-                        className="p-1 flex justify-start items-center gap-2 rounded-sm cursor-grab hover:bg-slate-200 transition-all duration-300">
+                        className={`border-[1px] flex flex-col justify-center bg-white p-2 w-[75px] h-[75px] items-center gap-2 rounded-sm cursor-grab hover:bg-slate-200 transition-all duration-300`}
+                        style={{ borderColor: color }}
+                    >
+
                         <div
-                            className={`p-1 text-sm rounded-sm text-white`}
-                            style={{ background: color }}>
+                            className={`p-1 rounded-sm text-white`}
+                        // style={{ background: color }}
+                        >
                             {IconComponent}
                         </div>
                         <p
diff --git a/src/components/process/processStepTwo/LeftSideBar.tsx b/src/components/process/processStepTwo/LeftSideBar.tsx
index ee8bc5e..d13161e 100644
--- a/src/components/process/processStepTwo/LeftSideBar.tsx
+++ b/src/components/process/processStepTwo/LeftSideBar.tsx
@@ -13,11 +13,13 @@ import { GrFormPrevious } from 'react-icons/gr';
 
 interface LeftSideBarProps {
     isFields: boolean;
+    isPages: boolean;
     selectedRecipientIndx: number;
     setSelectedRecipient: React.Dispatch<React.SetStateAction<number>>
 }
 
-const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIndx, setSelectedRecipient }) => {
+const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRecipientIndx, setSelectedRecipient }) => {
+
     let transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS;
     const dispatch = useDispatch();
     const params = useParams<{ accountId?: string; transactionId?: string; templateId?: string }>();
@@ -64,12 +66,28 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
         }
     }, [])
 
+
+    useEffect(() => {
+        if (selectedRecipient && selectedRecipient.type === recipientType.CC) {
+            for (const [indx, recip] of selectedRecipients.entries()) {
+                if (recip.type !== recipientType.CC) {
+                    setSelectedRecipient(indx);
+                    break;
+                }
+            }
+        };
+    }, [selectedRecipient])
+
+    if(selectedRecipient && selectedRecipient.type === recipientType.CC){
+        return <div className='col-span-2 bg-white h-full p-4 overflow-y-auto'></div>;
+    }
+
     return (
         <>
             {/* Left Side Bar - START */}
             {
-                selectedRecipients.length > 0 && <div className='col-span-2 bg-white h-full p-4 overflow-y-auto'>
-                    {isFields && <>
+                <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`}>
+                    {selectedRecipients.length > 0 && isFields && <>
                         {/* Fields List and Recipeint - Start */}
                         {/* Side Bar showing Recipients */}
                         <div className='relative'
@@ -136,9 +154,7 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
                         {/* Fields List and Recipeint - End */}
                     </>}
 
-
-
-                    {!isFields && <>
+                    {isPages && <>
                         {/* Pages - START */}
                         <div className='flex flex-col gap-2'>
                             {selectedDocuments.length && selectedDocuments.map((document, indx) => {
@@ -190,7 +206,7 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
                                                     onChange={(e) => {
                                                         const newPage = Number(e.target.value);
                                                         setCurrentPage(newPage);
-                                                        window.location.hash = document.id +""+ newPage;
+                                                        window.location.hash = document.id + "" + newPage;
                                                     }}
                                                 >
                                                     {document.pages != undefined && document.pages.map((_, pageIndex) => (
@@ -226,18 +242,7 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
                         </div>
                         {/* Pages - END */}
                     </>}
-
-
-
-
-
-
-
-
-
-
-
-                </div >
+                </div>
             }
 
             {/* Left Side Bar - END */}
diff --git a/src/components/process/processStepTwo/NavTwo.tsx b/src/components/process/processStepTwo/NavTwo.tsx
index 7bddf98..b38bf18 100644
--- a/src/components/process/processStepTwo/NavTwo.tsx
+++ b/src/components/process/processStepTwo/NavTwo.tsx
@@ -13,12 +13,16 @@ import { fetchDocuments } from '../../../store/slices/documentSlice'
 import { useNavigate, useParams } from 'react-router-dom'
 import { Bounce, toast } from 'react-toastify'
 import { FiChevronDown } from 'react-icons/fi'
+import RecipientsCon from '../processStepOne/RecipientsCon'
+import MessageCon from '../processStepOne/MessageCon'
 
 interface NavTwoProps {
     transactionSaving?: boolean;
     // setTransactionSaving: React.Dispatch<React.SetStateAction<boolean>>
     isFields?: boolean;
     setIsFields?: React.Dispatch<React.SetStateAction<boolean>>
+    isPages?: boolean;
+    setIsPages?: React.Dispatch<React.SetStateAction<boolean>>
     isSend?: boolean | null;
     setIsSend?: React.Dispatch<React.SetStateAction<boolean | null>>
     isPreview?: boolean
@@ -51,9 +55,27 @@ const fitObj = [
     },
 ]
 
-const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving = false, isFields, setIsFields, isSend, setIsSend, isPreview = false, aId = null, tId = null }) => {
+const NavTwo: React.FC<NavTwoProps> = ({
+    transactionSaving = false,
+    isFields,
+    setIsFields,
+    isPages,
+    setIsPages,
+    isSend,
+    setIsSend,
+    isPreview = false,
+    aId = null,
+    tId = null
+}) => {
     let transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS;
     const dispatch = useDispatch();
+
+    const [showActionsDropDown, setShowActionsDropDown] = useState<boolean>(false);
+    const [editRecipientsModal, setEditRecipientsModal] = useState<boolean>(false);
+    const [messageModal, setMessageModal] = useState<boolean>(false);
+
+    console.log(editRecipientsModal)
+
     const params = useParams<{ accountId?: string; transactionId?: string; templateId?: string }>();
     let accountId = params.accountId;
     let transactionId = params.transactionId
@@ -160,7 +182,20 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving = false, isFields, se
     }
 
     const handleSetIsFields = (setTo: boolean) => {
-        if (setTo !== isFields) setIsFields(setTo);
+        if (setTo !== undefined && setTo !== isFields) {
+            setIsFields(setTo)
+            if(setTo === true) {
+                setIsPages(false)
+            }
+        };
+    }
+    const handleSetIsPages = (setTo: boolean) => {
+        if (setTo !== undefined && setTo !== isPages) {
+            setIsPages(setTo)
+            if(setTo === true) {
+                setIsFields(false)
+            }
+        };
     }
 
     const zoom = (percentage: number, contentClass: string) => {
@@ -200,15 +235,15 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving = false, isFields, se
                 <div className='flex justify-start items-center gap-2'>
 
                     <div
-                        onClick={() => handleSetIsFields(true)}
+                        onClick={() => handleSetIsFields(!isFields)}
                         className={`flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm ${isFields ? 'bg-slate-100' : ''}`}>
                         <LuTableOfContents />
                         <p className='tracking-wide'>Fields</p>
                     </div>
 
                     <div
-                        onClick={() => handleSetIsFields(false)}
-                        className={`flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm ${!isFields ? 'bg-slate-100' : ''}`}>
+                        onClick={() => handleSetIsPages(!isPages)}
+                        className={`flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm ${isPages ? 'bg-slate-100' : ''}`}>
                         <IoIosDocument />
                         <p className='tracking-wide'>Pages</p>
                     </div>
@@ -219,7 +254,7 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving = false, isFields, se
                     >
                         <div
                             onClick={() => setIsFitDd(!isFitDd)}
-                            className='flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm'>
+                            className='hidden sm:flex md:flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm'>
                             <p className='tracking-wide'>Fit</p>
                             <MdKeyboardArrowDown style={{ transform: `${isFitDd ? "rotate(180deg)" : ""}` }} />
                         </div>
@@ -243,7 +278,7 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving = false, isFields, se
                     </div>
 
 
-                    {!isPreview && <div className='flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm'>
+                    {!isPreview && <div className='hidden sm:flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm'>
                         <RiResetRightLine
                             className={`${transactionSaving ? "animate-spin" : ""} transition duration-300`}
                         />
@@ -256,34 +291,58 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving = false, isFields, se
                 {/* Right Side - STARTS */}
                 <div className='flex justify-center items-center'>
 
-                    <div className="relative inline-block text-left">
+                    <div
+                        className="relative inline-block text-left">
                         {/* Trigger */}
-                        <button className="peer flex justify-center items-center bg-white px-4 py-2 text-xs font-medium text-gray-700 hover:bg-gray-50 ">
+                        <button
+                            onClick={() => setShowActionsDropDown((prev) => !prev)}
+                            className="flex justify-center items-center bg-white px-4 py-2 text-xs font-medium text-gray-700 hover:bg-gray-50 ">
                             <p className='tracking-wide mr-1'>Actions</p>
                             <MdKeyboardArrowDown />
                         </button>
 
                         {/* Menu */}
-                        <div className="absolute right-0 mt-2 w-48 hidden peer-focus:block rounded-md bg-white shadow-sm ring-1 ring-black/5 z-10">
-                            <div className="py-1">
+                        {showActionsDropDown && <div
+                            className="absolute right-0 mt-2 w-48 rounded-md bg-white shadow-sm ring-1 ring-black/5 z-10">
+                            <div
+                                className="py-1">
                                 <button className="w-full text-left px-4 py-2 text-sm hover:bg-gray-100">
                                     Save & Close
                                 </button>
-                                <button className="w-full text-left px-4 py-2 text-sm hover:bg-gray-100">
+                                <button
+                                    onClick={() => {
+                                        setMessageModal(true)
+                                        setShowActionsDropDown(false)
+                                    }}
+                                    className="w-full text-left px-4 py-2 text-sm hover:bg-gray-100">
                                     Edit Message
                                 </button>
-                                <button className="w-full text-left px-4 py-2 text-sm hover:bg-gray-100">
+                                <button
+                                    onClick={() => {
+                                        setEditRecipientsModal(true)
+                                        setShowActionsDropDown(false)
+                                    }}
+                                    className="w-full text-left px-4 py-2 text-sm hover:bg-gray-100">
                                     Edit Recipients
                                 </button>
+                                <button
+                                    onClick={() => {
+                                        setEditRecipientsModal(true)
+                                        setShowActionsDropDown(false)
+                                    }}
+                                    className="w-full text-left px-4 py-2 text-sm hover:bg-gray-100">
+                                    Edit Documents
+                                </button>
                                 <button className="w-full text-left px-4 py-2 text-sm hover:bg-gray-100">
                                     Advanced Options
                                 </button>
                             </div>
-                        </div>
+                        </div>}
                     </div>
 
-                    {/* Documnt Nav */}
-                    <div tabIndex={1} onBlur={() => setNav2DocToggle(false)}>
+                    {/* Document Nav */}
+                    <div className='hidden sm:block'
+                    tabIndex={1} onBlur={() => setNav2DocToggle(false)}>
                         <div onClick={() => setNav2DocToggle(!nav2DocToggle)} className='flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm'>
                             <p className='tracking-wide'>{selectedDocuments.length} Documents</p>
                             <MdKeyboardArrowDown className={`${nav2DocToggle ? 'rotate-180' : ''} transition-all`} />
@@ -305,7 +364,7 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving = false, isFields, se
                     </div>
 
                     {/* Recipients Nav */}
-                    <div className='relative' tabIndex={1} onBlur={() => setNav2RecToggle(false)}>
+                    <div className='hidden sm:block relative' tabIndex={1} onBlur={() => setNav2RecToggle(false)}>
                         <div onClick={() => setNav2RecToggle(!nav2RecToggle)} className='flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm'>
                             <p className='tracking-wide'>{selectedRecipients.length} Recipients</p>
                             <MdKeyboardArrowDown className={`${nav2RecToggle ? 'rotate-180' : ''} transition-all`} />
@@ -338,7 +397,7 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving = false, isFields, se
                             </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)]'>
@@ -346,10 +405,39 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving = false, isFields, se
                                 Sign & Send
                             </p>
                             <FaSignature className='text-white text-md' />
-                        </div>}
+                        </div>} */}
                     </>}
 
 
+                    {editRecipientsModal && accountId && transactionId && <>
+                        <div className="w-full h-full absolute top-0 left-0 z-[1000] flex justify-center items-center">
+                            <div className="w-full h-full bg-slate-100 opacity-85 blur-2xl absolute top-0 left-0"></div>
+                            <div className="z-50 bg-white p-4 rounded-sm shadow-md">
+                                <RecipientsCon
+                                    transactionTemplateToggle={transactionTemplateToggle}
+                                    accountId={accountId}
+                                    transactionId={transactionId}
+                                    userData={userDetails}
+                                    setEditRecipientsModal={setEditRecipientsModal}
+                                />
+                            </div>
+                        </div>
+                    </>}
+
+                    {messageModal && accountId && transactionId && <>
+                        <div className="w-full h-full absolute top-0 left-0 z-[1000] flex justify-center items-center">
+                            <div className="w-full h-full bg-slate-100 opacity-85 blur-2xl absolute top-0 left-0"></div>
+                            <div className="z-50 bg-white p-4 rounded-sm shadow-md">
+                                <MessageCon
+                                    transactionTemplateToggle={transactionTemplateToggle}
+                                    accountId={accountId}
+                                    transactionId={transactionId}
+                                    messageModal={messageModal}
+                                    setMessageModal={setMessageModal}
+                                />
+                            </div>
+                        </div>
+                    </>}
 
                 </div>
                 {/* Right Side - ENDS */}
diff --git a/src/components/process/processStepTwo/ProcessStepTwo.tsx b/src/components/process/processStepTwo/ProcessStepTwo.tsx
index 84d4b79..c6d0e05 100644
--- a/src/components/process/processStepTwo/ProcessStepTwo.tsx
+++ b/src/components/process/processStepTwo/ProcessStepTwo.tsx
@@ -17,8 +17,11 @@ export interface IsSendInterface {
 }
 
 const ProcessStepTwo = () => {
+  const windowWidth = window.innerWidth;
 
-  const [isFields, setIsFields] = useState(true);
+  const [isFields, setIsFields] = useState(windowWidth > 638 ? true : false);
+  const [isPages, setIsPages] = useState(false);
+  
   const [selectedRecipient, setSelectedRecipient] = useState(0);
 
   const [transactionSaving, setTransactionSaving] = useState<boolean>(false);
@@ -36,10 +39,10 @@ const ProcessStepTwo = () => {
 
   return (
     <div className={`min-w-full relative h-screen bg-slate-100 overflow-hidden ${(globalLoader.isLoading) ? 'pointer-events-none' : ''}`}>
-      <NavTwo transactionSaving={transactionSaving} isFields={isFields} setIsFields={setIsFields} isSend={isSend} setIsSend={setIsSend} />
+      <NavTwo transactionSaving={transactionSaving} isFields={isFields} isPages={isPages} setIsPages={setIsPages} setIsFields={setIsFields} isSend={isSend} setIsSend={setIsSend} />
 
-      <div className='grid grid-cols-12 gap-1 mt-1 h-[calc(100vh-46px)] overflow-hidden'>
-        <LeftSideBar isFields={isFields} selectedRecipientIndx={selectedRecipient} setSelectedRecipient={setSelectedRecipient} />
+      <div className='sm:grid sm:grid-cols-12 sm:gap-1 mt-1 h-[calc(100vh-46px)] overflow-hidden'>
+        <LeftSideBar isFields={isFields} isPages={isPages} selectedRecipientIndx={selectedRecipient} setSelectedRecipient={setSelectedRecipient} />
         <DocumentContainer transactionSaving={transactionSaving} setTransactionSaving={setTransactionSaving} isSend={isSend} setIsSend={setIsSend} />
       </div>
 
diff --git a/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx b/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx
index 7efcaa8..7430c5c 100644
--- a/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx
+++ b/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx
@@ -2,7 +2,7 @@ import { DroppedItemsObj } from "../DocumentContainer";
 import React, { useEffect, useState } from "react";
 
 import { DroppedItem, StylesInterface } from "../../../../utlity/types";
-import { IoIosArrowDown } from "react-icons/io";
+import { IoIosArrowDown, IoMdClose } from "react-icons/io";
 
 import { TagsTypes } from "../../../../utlity/types";
 
@@ -26,6 +26,7 @@ export interface DroppedItemProps {
     selTagKey: string,
     selTagIndx: number,
     signClient: boolean,
+    emptySelectedTag?: () => void
 }
 
 export enum TEXT {
@@ -92,7 +93,16 @@ const defaultStyles: StylesInterface = {
 
 
 
-const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, setDroppedItems, selTagKey, selTagIndx, signClient = false }) => {
+const RightSideBar: React.FC<DroppedItemProps> = (
+    {
+        droppedItems,
+        selectedTag,
+        setDroppedItems,
+        selTagKey,
+        selTagIndx,
+        signClient = false,
+        emptySelectedTag
+    }) => {
     const selectedType = selectedTag.type.toLowerCase() in enumMap && enumMap[selectedTag.type.toLowerCase() as keyof typeof enumMap];
 
     const [styles, setStyles] = useState(defaultStyles);
@@ -283,8 +293,13 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
     return (
         <>
             {/* Right Side Bar Start */}
-            <div className='col-span-2 w-full h-full bg-white text-sm overflow-y-auto'>
-                <p className="p-2 font-semibold text-md"><span className="capitalize">{selectedTag.type.toLowerCase()}</span> Attributes:</p>
+            <div className='absolute border-l-1 border-t-1 border-slate-300 rounded-tl-lg right-0 top-[48px] sm:rounded-none sm:top-0 sm:border-0 sm:relative sm:col-span-2 sm:w-full h-full bg-white text-sm overflow-y-auto'>
+                <div className="flex flex-row-reverse justify-end items-center">
+                    <p className="p-2 font-semibold text-md"><span className="capitalize">{selectedTag.type.toLowerCase()}</span></p>
+                    <p className="ml-2.5 cursor-pointer" >
+                        <IoMdClose onClick={emptySelectedTag} />
+                    </p>
+                </div>
                 <hr className="text-slate-200" />
 
                 <div className="p-3 text-sm text-slate-600 flex flex-col gap-2">
diff --git a/src/components/process/processStepTwo/rightSideBar/attributes/DirectionalControls.tsx b/src/components/process/processStepTwo/rightSideBar/attributes/DirectionalControls.tsx
index e806726..4711717 100644
--- a/src/components/process/processStepTwo/rightSideBar/attributes/DirectionalControls.tsx
+++ b/src/components/process/processStepTwo/rightSideBar/attributes/DirectionalControls.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { FaArrowUp, FaArrowDown, FaArrowLeft, FaArrowRight } from 'react-icons/fa';
+import { MdOutlineKeyboardArrowDown } from 'react-icons/md';
 
 interface DirectionalControlsProps {
   onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void;
@@ -103,28 +104,39 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
   `;
 
   const inputClass = `
-    w-14 text-center text-[12px] rounded border px-1 py-0.5 bg-white
+    w-14 text-left pl-2 text-[12px] rounded py-0.5 bg-white
     ${disabled
       ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
-      : 'border-gray-300 text-gray-700 focus:outline-none focus:ring focus:border-blue-400'}
+      : 'border-gray-300 text-gray-700 focus:outline-none focus:border-blue-400'}
   `;
 
   return (
-    <div className={`inline-flex flex-col items-center space-y-2 text-[12px] ${className}`}>
+    <div className={`${className}`}>
       {/* Top */}
-      <button type="button" onClick={() => handleMove('up')} disabled={disabled} className={buttonClass} title="Move Up">
+      {/* <button type="button" onClick={() => handleMove('up')} disabled={disabled} className={buttonClass} title="Move Up">
         <FaArrowUp />
-      </button>
-
+      </button> */}
+      <div className='flex items-center justify-between'>
+        <label className='font-medium text-slate-600'>Position</label>
+        <MdOutlineKeyboardArrowDown className='mr-2' />
+      </div>
       {/* Middle: Left / Inputs / Right */}
-      <div className="flex items-center space-x-3">
-        <button type="button" onClick={() => handleMove('left')} disabled={disabled} className={buttonClass} title="Move Left">
+      {/* <div className="flex w-full items-center justify-center space-x-3"> */}
+      {/* <button type="button" onClick={() => handleMove('left')} disabled={disabled} className={buttonClass} title="Move Left">
           <FaArrowLeft />
-        </button>
+        </button> */}
 
-        {/* Input fields */}
-        <div className="flex flex-col items-center space-y-1">
+      {/* Input fields */}
+      <div className="py-1 flex items-center gap-1">
+
+        <div className='flex items-center font-semibold border border-gray-300 px-2 py-1 rounded'>
+          <label
+            htmlFor="fromleft"
+            className='text-xs'>
+            X
+          </label>
           <input
+            id="fromleft"
             type="number"
             value={leftValue}
             onChange={(e) => { e.preventDefault; handlePositionInputChange('left', e.target.value) }}
@@ -134,7 +146,16 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
             className={inputClass}
             placeholder="Left"
           />
+        </div>
+
+        <div className='flex items-center font-semibold border border-gray-300 px-2 py-1 rounded'>
+          <label
+            htmlFor="fromtop"
+            className='text-xs'>
+            Y
+          </label>
           <input
+            id="fromtop"
             type="number"
             value={topValue}
             onChange={(e) => { e.preventDefault; handlePositionInputChange('top', e.target.value) }}
@@ -145,19 +166,20 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
             placeholder="Top"
           />
         </div>
-
-        <button type="button" onClick={() => handleMove('right')} disabled={disabled} className={buttonClass} title="Move Right">
-          <FaArrowRight />
-        </button>
       </div>
 
-      <button type="button" onClick={() => handleMove('down')} disabled={disabled} className={buttonClass} title="Move Down">
+      {/* <button type="button" onClick={() => handleMove('right')} disabled={disabled} className={buttonClass} title="Move Right">
+          <FaArrowRight />
+        </button> */}
+      {/* </div> */}
+
+      {/* <button type="button" onClick={() => handleMove('down')} disabled={disabled} className={buttonClass} title="Move Down">
         <FaArrowDown />
-      </button>
-      <div className="flex items-center space-x-1">
+      </button> */}
+      {/* <div className="flex items-center space-x-1">
         <div className="relative flex items-center justify-center bg-white rounded-lg px-1 py-2 w-24 ">
         </div>
-      </div>
+      </div> */}
     </div>
   );
 };
diff --git a/src/components/setting/AsideSection.tsx b/src/components/setting/AsideSection.tsx
index cd20e24..60836e3 100644
--- a/src/components/setting/AsideSection.tsx
+++ b/src/components/setting/AsideSection.tsx
@@ -1,7 +1,5 @@
-interface SubSection {
-  id: string;
-  label: string;
-}
+import { SubSection } from "./Setting";
+
 
 interface AsideSectionProps {
   activeSubSection: string;
@@ -23,12 +21,7 @@ const AsideSection = ({
 
   return (
     <div className="">
-      <div className="mb-4">
-        <h3 className="text-lg font-semibold text-gray-800">{mainTabTitle}</h3>
-        <p className="text-sm text-gray-500 mt-1">Navigate through sections</p>
-      </div>
-      
-      <nav className="space-y-2 max-h-96 overflow-y-auto">
+      <nav className="space-y-1 max-h-96 overflow-y-auto">
         {subSections.map((subSection) => (
           <a
             key={subSection.id}
@@ -37,12 +30,13 @@ const AsideSection = ({
               e.preventDefault(); // Prevent default anchor behavior
               onSubSectionClick(subSection.id);
             }}
-            className={`block w-full text-left px-3 py-2.5 rounded-md text-sm font-medium transition-all duration-200 hover:bg-gray-50 cursor-pointer no-underline ${
+            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
-                ? "bg-blue-50 text-blue-600 border-l-4 border-blue-600 shadow-sm"
+                ? "bg-[#F4F9FF] text-[var(--primary)]"
                 : "text-gray-600 hover:text-gray-800 hover:bg-gray-50"
             }`}
           >
+            {subSection.component}
             <span className="block">{subSection.label}</span>
           </a>
         ))}
diff --git a/src/components/setting/Setting.tsx b/src/components/setting/Setting.tsx
index 3ce7b7b..176f472 100644
--- a/src/components/setting/Setting.tsx
+++ b/src/components/setting/Setting.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState, useRef } from "react";
-import SettingNav from "./SettingNav";
 import { useParams, useLocation, useNavigate } from "react-router-dom";
 import api from "../../config/api";
 import UserProfile from './UserProfile';
@@ -8,8 +7,12 @@ import CreateAndInvite, { ActionType, FormDataType } from './CreateAndInvite'
 import AsideSection from "./AsideSection";
 import Signature from "./Signature/Signature";
 import { Bounce, toast } from "react-toastify";
-import AccountNav from "../accounts/AccountNav";
 import ContactForm, { ContactData } from "./ContactForm";
+import { useSelector } from "react-redux";
+import { RootState } from "../../store/store";
+import { LuUserRound } from "react-icons/lu";
+import { AiFillSignature, AiOutlineSignature } from "react-icons/ai";
+import { FaRegUser } from "react-icons/fa";
 
 // Define the shape of state object
 interface Account {
@@ -26,7 +29,7 @@ interface UserData {
   account: Account;
 }
 
-interface SubSection {
+export interface SubSection {
   id: string;
   label: string;
   component?: React.ReactNode;
@@ -50,6 +53,8 @@ const Setting = () => {
     JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
   );
 
+  const userFetchData = useSelector((state: RootState) => state.user)
+
   // Refs for subsections within each main tab
   const subSectionRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
   const scrollContainerRef = useRef<HTMLDivElement>(null);
@@ -79,8 +84,8 @@ const Setting = () => {
     switch (tabId) {
       case "userProfile":
         return [
-          { id: "profile-info", label: "Profile Information" },
-          { id: "signature", label: "Signature" },
+          { id: "profile-info", label: "Personal Information", component: <FaRegUser /> },
+          { id: "signature", label: "Signature", component: <AiOutlineSignature className="text-lg" /> },
         ];
       default:
         return [];
@@ -241,9 +246,9 @@ const Setting = () => {
 
   const tabs = [
     { id: "userProfile", label: "User Profile", type: "settings" },
-    { id: "create and invite", label: "Create and invite", type: "settings" },
+    // { id: "create and invite", label: "Create and invite", type: "settings" },
     { id: "contacts", label: "Contacts", type: "settings" },
-    { id: "language", label: "Language", type: "settings" },
+    // { id: "language", label: "Language", type: "settings" },
     { id: "contactAdd", label: "Add Contact", type: "contact" },
     { id: "contactRemove", label: "Remove Contact", type: "contact" },
     { id: "contactShare", label: "Share Contact", type: "contact" },
@@ -407,19 +412,19 @@ const Setting = () => {
     <>
       {/* <SettingNav /> */}
       {/* <AccountNav/> */}
-      <div className="bg-[#f9fafa] h-[calc(90vh-20px)] flex flex-col mt-2">
+      <div className="bg-white h-[calc(90vh-20px)] flex flex-col mx-6 my-6 rounded-lg overflow-hidden">
         {/* Tabs */}
         <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 gap-4 md:gap-6 ">
+          <div className="flex flex-wrap md:gap-4 ">
             {tabs.map((tab) =>
               tab.type === page1 && (
                 <button
                   key={tab.id}
                   onClick={() => handleMainTabClick(tab.id)}
-                  className={`cursor-pointer relative pb-3 text-sm font-medium transition-all duration-200
+                  className={`cursor-pointer relative px-4 pb-3 text-sm font-medium transition-all duration-200
               ${activeTab === tab.id
-                      ? "text-blue-600 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-blue-600"
-                      : "text-gray-600 hover:text-blue-500"
+                      ? "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]"
                     }`}
                 >
                   {tab.label}
@@ -430,12 +435,26 @@ const Setting = () => {
         </div>
 
         {/* Responsive Layout */}
-        <div className="flex-1 min-h-0 flex flex-col lg:flex-row px-4 md:px-6 lg:px-7 pt-2 lg:gap-6 ">
+        <div className="flex-1 min-h-0 flex flex-col lg:flex-row">
 
           {/* Sidebar (hidden on small, shown on lg) */}
           {activeTab === 'userProfile' && (
-            <section className="hidden lg:block flex-shrink-0 w-56">
-              <div className="sticky top-6 z-20">
+            <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">
+                  <div>
+                    <p className="bg-[#FAF0FF] text-[#A915FF] font-semibold max-w-max px-3 py-2 rounded-full ">PK</p>
+                  </div>
+                  <div>
+                    <p className="font-semibold">{user.name}</p>
+                    <p className="text-sm text-slate-600 w-[24ch] overflow-hidden text-ellipsis whitespace-nowrap">
+                      {user.email}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="sticky top-6 z-20 px-6 pt-2">
                 <AsideSection
                   activeSubSection={activeSubSection}
                   onSubSectionClick={handleSubSectionClick}
diff --git a/src/components/setting/Signature/Signature.tsx b/src/components/setting/Signature/Signature.tsx
index d3924f8..5c77bc4 100644
--- a/src/components/setting/Signature/Signature.tsx
+++ b/src/components/setting/Signature/Signature.tsx
@@ -71,7 +71,7 @@ const SignatureManager: React.FC = () => {
         setLoading(true)
         try {
             let res = await api.delete(`/api/user/signatures/${id}`)
-            
+
             toast.success("Signature Delete Successfull", {
                 position: "top-center",
                 autoClose: 500,
@@ -116,7 +116,7 @@ const SignatureManager: React.FC = () => {
         if (mode === 'initials') {
             const initials = `${(firstName?.[0] ?? '')}${(lastName?.[0] ?? '')}`.toUpperCase();
             return (
-                <div className={`text-center text-[24px]`} style={{fontFamily:selectedFont?.style}}>
+                <div className={`text-center text-[24px]`} style={{ fontFamily: selectedFont?.style }}>
                     {initials}
                 </div>
             );
@@ -124,7 +124,7 @@ const SignatureManager: React.FC = () => {
 
         const fullName = `${firstName ?? ''} ${lastName ?? ''}`.trim();
         return (
-            <div className={`text-center text-[20px]`}style={{fontFamily:selectedFont?.style}}>
+            <div className={`text-center text-[20px]`} style={{ fontFamily: selectedFont?.style }}>
                 <div>{fullName}</div>
             </div>
         );
@@ -146,32 +146,33 @@ const SignatureManager: React.FC = () => {
                     <div className="max-w-[84vw] mx-auto ">
                         <>
                             {/* Header */}
-                            <div className="flex items-center justify-between mb-3">
-                                <div>
-                                    <h1 className="text-[17px] font-medium text-gray-500 mb-2">Signatures</h1>
-                                    <p className="text-gray-300 text-sm">Add or update your name and signature styles.</p>
+                            <div className="flex items-end justify-between mb-3">
+                                <div className="flex flex-col">
+                                    <p className="text-lg font-semibold">Signatures</p>
+                                    <p className="text-xs text-slate-400 mt-1">Add or update your name and signature styles.</p>
                                 </div>
-                                <button className="bg-gradient-to-br from-[var(--primary)] to-blue-600 hover:bg-[var(--modalSubmitBGHover)] text-white px-3 gap-1 py-1.5 rounded-lg font-semibold text-sm text-[14px] flex items-center cursor-pointer transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" onClick={handleAddNew}>
-                                    <FiPlus className="" />
-                                    ADD
+                                <button className="bg-[var(--mainPrimaryBtn)] text-white px-3.5 gap-1 py-2 rounded-lg text-sm font-semibold flex items-center cursor-pointer transition-all duration-200 transform hover:-translate-y-0.5"
+                                    onClick={handleAddNew}>
+                                    <FiPlus className="text-lg font-semibold" />
+                                    Add Signature
                                 </button>
                             </div>
 
                             {/* Table Card */}
 
-                            <div className="overflow-x-auto">
-                                <div className="bg-white rounded-md min-w-[800px] md:min-w-full overflow-hidden border border-gray-100">
+                            <div className="overflow-x-auto mt-6">
+                                <div className="bg-white min-w-[800px] md:min-w-full overflow-hidden">
                                     {/* Table Header */}
-                                    <div className="bg-gray-50 border-b border-gray-200 ">
-                                        <div className="grid grid-cols-12 gap-4 px-6 py-4">
-                                            <div className="col-span-5">
-                                                <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider">Signature</h3>
+                                    <div className="bg-gray-50 rounded-lg">
+                                        <div className="grid grid-cols-12 gap-4 px-6 py-2">
+                                            <div className="col-span-6">
+                                                <h3 className="text-sm font-semibold">Signature</h3>
                                             </div>
-                                            <div className="col-span-5">
-                                                <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider">Initial</h3>
+                                            <div className="col-span-4">
+                                                <h3 className="text-sm font-semibold">Initial</h3>
                                             </div>
                                             <div className="col-span-2">
-                                                <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider text-right">Actions</h3>
+                                                <h3 className="text-sm font-semibold ml-4">Action</h3>
                                             </div>
                                         </div>
                                     </div>
@@ -179,17 +180,17 @@ const SignatureManager: React.FC = () => {
                                     {/* Table Body */}
                                     <div className="divide-y divide-gray-100">
                                         {signatures.map((signature, index) => (
-                                            <div key={signature.id} className="grid grid-cols-12 gap-4 px-6 py-9 hover:bg-gray-50 transition-colors duration-150">
+                                            <div key={signature.id} className="grid grid-cols-12 gap-4 py-4 transition-colors duration-150">
                                                 {/* Signature Column */}
-                                                <div className="col-span-5">
-                                                    <div className="flex flex-col space-y-2 relative ps-6 border-l-3 border-blue-600 rounded-bl-2xl rounded-tl-2xl">
+                                                <div className="col-span-6">
+                                                    <div className="flex flex-col space-y-2 relative ps-6 bg-slate-50 p-4 rounded-lg">
                                                         {/* Label */}
-                                                        <div className="text-sm text-gray-600 font-medium mb-1">
-                                                            Signed by:
+                                                        <div className="text-xs text-gray-500 absolute top-[8px] left-[15px]">
+                                                            Signed by
                                                         </div>
 
                                                         {/* Signature Image or Name/Initials */}
-                                                        <div className="bg-white rounded-lg p-1 flex items-center justify-center">
+                                                        <div className="rounded-lg p-1 my-4 flex items-center justify-center">
                                                             {signature?.signatureType !== 'SELECT' ? (
                                                                 <img
                                                                     src={`data:${signature?.signatureMimeType};base64,${signature?.signatureBlob}`}
@@ -202,7 +203,7 @@ const SignatureManager: React.FC = () => {
                                                         </div>
 
                                                         {/* Signature ID */}
-                                                        <div className="text-xs text-gray-500 truncate">
+                                                        <div className="text-xs text-gray-500 truncate absolute bottom-[8px] left-[15px] flex-nowrap max-w-[30ch] md:max-w-[30ch] lg:max-w-[50ch] overflow-hidden text-ellipsis">
                                                             {signature.signatureHash}
                                                         </div>
                                                     </div>
@@ -210,15 +211,15 @@ const SignatureManager: React.FC = () => {
                                                 </div>
 
                                                 {/* Initial Column */}
-                                                <div className="col-span-5">
-                                                    <div className="flex flex-col space-y-2 relative ps-6 border-l-3 border-green-600 rounded-bl-2xl rounded-tl-2xl">
+                                                <div className="col-span-4">
+                                                    <div className="flex flex-col space-y-2 relative ps-6 bg-slate-50 p-4 rounded-lg">
                                                         {/* Label */}
-                                                        <div className="text-sm text-gray-600 font-medium mb-1">
-                                                            Initials
+                                                        <div className="text-xs text-gray-500 absolute top-[8px] left-[15px]">
+                                                            Initial
                                                         </div>
 
                                                         {/* Signature Initials: Image or Generated Text */}
-                                                        <div className="bg-white rounded-lg p-1 flex items-center justify-center">
+                                                        <div className="rounded-lg p-1 my-4 flex items-center justify-center">
                                                             {signature?.signatureType !== 'SELECT' ? (
                                                                 <img
                                                                     src={`data:${signature.initialsMimeType};base64,${signature.initialsBlob}`}
@@ -231,43 +232,28 @@ const SignatureManager: React.FC = () => {
                                                         </div>
 
                                                         {/* Initial ID */}
-                                                        <div className="text-xs text-gray-500 truncate">
-                                                            {signature.initialsHash}
+                                                        <div className="text-xs text-gray-500 truncate absolute bottom-[8px] left-[15px] flex-nowrap sm:max-w-[10ch] md:max-w-[20ch] lg:max-w-[30ch] overflow-hidden text-ellipsis">
+                                                            {signature.signatureHash}
                                                         </div>
                                                     </div>
                                                 </div>
 
 
                                                 {/* Actions Column */}
-                                                <div className="col-span-2 flex justify-between items-start pt-9 ps-8 ">
-                                                    <div className="relative ">
+                                                <div className="col-span-2">
+                                                    <div className="relative flex justify-start gap-4">
                                                         <button
-                                                            onClick={() => toggleDropdown(signature.id)}
-                                                            className="bg-gray-100 hover:bg-gray-200 text-gray-700 px-1.5 py-1.5 text-[13px] rounded-lg font-semibold flex items-center  transition-all duration-200 border border-gray-300 "
+                                                            onClick={() => handleEdit(signature.id)}
+                                                            className="max-w-max text-gray-500 text-lg"
                                                         >
-                                                            ACTIONS
-                                                            <FiMoreVertical />
+                                                            <FiEdit3 />
+                                                        </button>
+                                                        <button
+                                                            onClick={() => handleDelete(signature.id)}
+                                                            className="max-w-max text-red-500 text-lg"
+                                                        >
+                                                            <FiTrash2 />
                                                         </button>
-
-                                                        {/* Dropdown Menu */}
-                                                        {activeDropdown === signature.id && (
-                                                            <div className={`absolute right-0 mt-0.5 -top-5  w-28 bg-white rounded-lg border border-gray-200 z-10 py-1`}>
-                                                                <button
-                                                                    onClick={() => handleEdit(signature.id)}
-                                                                    className="w-full px-4 py-1 text-left text-gray-500  hover:bg-blue-50 hover:text-blue-700 flex items-center gap-3 text-sm  transition-colors duration-150"
-                                                                >
-                                                                    <FiEdit3 />
-                                                                    Edit
-                                                                </button>
-                                                                <button
-                                                                    onClick={() => handleDelete(signature.id)}
-                                                                    className="w-full px-4 py-1 text-left text-gray-500 hover:bg-red-50 hover:text-red-700 flex items-center gap-3  text-sm transition-colors duration-150"
-                                                                >
-                                                                    <FiTrash2 />
-                                                                    Delete
-                                                                </button>
-                                                            </div>
-                                                        )}
                                                     </div>
                                                 </div>
                                             </div>
diff --git a/src/components/setting/UserProfile.tsx b/src/components/setting/UserProfile.tsx
index cbbe56a..f6da564 100644
--- a/src/components/setting/UserProfile.tsx
+++ b/src/components/setting/UserProfile.tsx
@@ -20,36 +20,36 @@ interface UserProfileProps {
 
 const UserProfile: React.FC<UserProfileProps> = ({ userData }) => {
   return (
-    <div className="bg-white rounded-md shadow-sm flex flex-col sm:flex-row items-center sm:items-start w-full p-6 lg:gap-6 ">
-      {/* Profile Picture */}
-      <div className="flex-shrink-0 text-center">
-        <div className="w-20 h-20 bg-gradient-to-br from-[var(--primary)] to-blue-600 text-white font-bold text-2xl rounded-full flex items-center justify-center shadow-lg">
-          {userData.name.slice(0, 2).toUpperCase()}
+    <div className="bg-white rounded-md flex flex-col items-center sm:items-start w-full p-6 lg:gap-4 ">
+      <div className="flex flex-col">
+        <p className="text-lg font-semibold">Personal Information</p>
+        <p className="text-xs text-slate-400 mt-1">Basic info, like your name and email address.</p>
+      </div>
+
+
+
+      <div className="bg-slate-50 w-full px-3 py-2 rounded-lg">
+        <p className="text-sm font-semibold">Information</p>
+      </div>
+
+
+
+      <div className="w-full border-gray-200 rounded-md bg-white font-sans">
+        <div className="sm:flex sm:flex-col md:grid md:grid-cols-[200px_1fr] lg:grid-cols-[300px_1fr] border-b border-gray-100 px-4 py-4">
+          <span className="text-gray-600">Full Name :</span>
+          <span className="font-medium text-black">{userData.name}</span>
+        </div>
+        <div className="sm:flex sm:flex-col md:grid md:grid-cols-[200px_1fr] lg:grid-cols-[300px_1fr] border-b border-gray-100 px-4 py-4">
+          <span className="text-gray-600">Email Address :</span>
+          <span className="font-medium text-black">{userData.email}</span>
+        </div>
+        <div className="sm:flex sm:flex-col md:grid md:grid-cols-[200px_1fr] lg:grid-cols-[300px_1fr] px-4 py-4">
+          <span className="text-gray-600">Account Name :</span>
+          <span className="font-medium text-black">{userData.account.name}</span>
         </div>
       </div>
 
-      {/* Info Fields */}
-      <div className="flex flex-col justify-center flex-1 w-full">
-        {/* Row: Name */}
-        <div className="flex flex-col sm:flex-row py-1">
-          <div className="text-gray-500 font-medium text-[13px] sm:w-32">Name</div>
-          <div className="text-gray-400 font-medium text-[13px]">{userData.name}</div>
-        </div>
 
-        {/* Row: Email */}
-        <div className="flex flex-col sm:flex-row py-1">
-          <div className="text-gray-500 font-medium text-[13px] sm:w-32">Email</div>
-          <div className="text-gray-400 font-medium text-[13px]">{userData.email}</div>
-        </div>
-
-        {/* Row: Account Name */}
-        <div className="flex flex-col sm:flex-row py-1">
-          <div className="text-gray-500 font-medium text-[13px] sm:w-32">Account name</div>
-          <div className="text-gray-400 font-medium text-[13px]">
-            {userData.account.name}
-          </div>
-        </div>
-      </div>
     </div>
   );
 };
diff --git a/src/components/templates/TemplateDeleteWarnModal.tsx b/src/components/templates/TemplateDeleteWarnModal.tsx
new file mode 100644
index 0000000..1c9edd1
--- /dev/null
+++ b/src/components/templates/TemplateDeleteWarnModal.tsx
@@ -0,0 +1,43 @@
+import { Dispatch } from "@reduxjs/toolkit";
+import { useNavigate } from "react-router-dom";
+
+type PropsType = {
+    setShowTemplateDeleteWarnModal: React.Dispatch<{show: boolean, templateId: string}>;
+    onConfirm: () => void;
+};
+
+const TemplateDeleteWarnModal = ({ setShowTemplateDeleteWarnModal, onConfirm }: PropsType) => {
+    const navigate = useNavigate()
+
+    return (
+        <div className="fixed inset-0 backdrop-blur-sm bg-black/30 flex items-center justify-center z-50">
+            <div className="bg-white rounded-lg shadow-xl p-6 w-100">
+                <h3 className="text-lg font-medium text-gray-800 mb-4">Confirm Self Sign</h3>
+                <p className="text-gray-600 mb-6">
+                    Are you sure you want to proceed with self sign? This will remove all the recipient that you added.
+                </p>
+                <div className="flex justify-end gap-3">
+                    <button
+                        onClick={() => {
+                            setShowTemplateDeleteWarnModal({show: false, templateId: ""});
+                        }}
+
+                        className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-md transition-colors"
+                    >
+                        No
+                    </button>
+                    <button
+                        onClick={() => {
+                            onConfirm();
+                        }}
+                        className="px-4 py-2 bg-red-600 text-white hover:bg-red-700 rounded-md transition-colors"
+                    >
+                        Yes
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TemplateDeleteWarnModal;
diff --git a/src/components/templates/TemplateTable.tsx b/src/components/templates/TemplateTable.tsx
index 1d561c1..5eb81b5 100644
--- a/src/components/templates/TemplateTable.tsx
+++ b/src/components/templates/TemplateTable.tsx
@@ -6,6 +6,7 @@ import LoaderUi from '../../helper/LoaderUi';
 import api from '../../config/api';
 import { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi';
 import { TemplateInterface } from '../../utlity/types';
+import TemplateDeleteWarnModal from './TemplateDeleteWarnModal';
 
 const TemplateTable = () => {
     const [loading, setLoading] = useState(false)
@@ -13,6 +14,7 @@ const TemplateTable = () => {
     const accountDetails = useSelector((state: any) => state.user.account);
     const accountId = accountDetails.id || "";
     const [showMenu, setShowMenu] = useState(null);
+    const [showTemplateDeleteWarnModal, setShowTemplateDeleteWarnModal] = useState<{ show: boolean, templateId: string }>({ show: false, templateId: "" });
 
     const [activeAccountId, setActiveAccountId] = useState<string | null>(
         JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
@@ -99,6 +101,16 @@ const TemplateTable = () => {
         setShowMenu(null);
         navigate(`/process-step-one/${accountId}/template/${templateId}`);
     }
+    const handleDeleteClick = async (templateId: string) => {
+        setShowMenu(null);
+        try {
+            await api.delete(`api/accounts/${activeAccountId}/templates/${templateId}`)
+            setTemplates((prev) => {
+                return prev.filter((temp) => temp.id !== Number(templateId));
+            });
+            setShowTemplateDeleteWarnModal({ show: false, templateId: "" })
+        } catch (e) { }
+    }
 
     function formatTimestamp(isoString, options = { timeZone: 'local' }) {
         // Parse the ISO string to a Date object
@@ -199,6 +211,7 @@ const TemplateTable = () => {
                                                         }
                                                     }}
                                                 >
+                                                    
                                                     <button
                                                         className="text-gray-400 hover:text-gray-600 cursor-pointer transition-colors duration-150 p-1 rounded-md hover:bg-gray-100"
                                                         onClick={() =>
@@ -217,14 +230,14 @@ const TemplateTable = () => {
                                                                 Use
                                                             </button>
                                                             <button
-                                                                onMouseDown={() => handleEditClick(item.id)}
+                                                                onClick={() => handleEditClick(item.id)}
                                                                 className="w-full text-left px-4 py-2 text-sm cursor-pointer text-gray-700 hover:bg-yellow-50 hover:text-yellow-600 transition-colors"
                                                             >
                                                                 Edit
                                                             </button>
                                                             <button
-                                                                onMouseDown={() => {
-                                                                    setShowMenu(null);
+                                                                onClick={() => {
+                                                                    setShowTemplateDeleteWarnModal({ show: true, templateId: item.id+"" })
                                                                 }}
                                                                 className="w-full text-left px-4 py-2 text-sm cursor-pointer text-gray-700 hover:bg-red-50 hover:text-red-600 transition-colors"
                                                             >
@@ -256,6 +269,13 @@ const TemplateTable = () => {
                         )}
                     </table>
                 </div>
+
+                {
+                    showTemplateDeleteWarnModal.show && <TemplateDeleteWarnModal
+                        setShowTemplateDeleteWarnModal={setShowTemplateDeleteWarnModal}
+                        onConfirm={() => handleDeleteClick(showTemplateDeleteWarnModal.templateId)}
+                    />
+                }
             </div>
         </>
     )
diff --git a/src/components/templates/Templates.tsx b/src/components/templates/Templates.tsx
index 51deb03..5e0756e 100644
--- a/src/components/templates/Templates.tsx
+++ b/src/components/templates/Templates.tsx
@@ -28,7 +28,7 @@ const Templates = () => {
 
   const filters = ["All", "My Templates", "Shared"];
 
-  
+
 
   const handleAddTemplate = async () => {
     try {
@@ -48,7 +48,7 @@ const Templates = () => {
   return (
     <div className="p-3 text-sm">
       {/* Header */}
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-3">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-3 px-4">
         {/* Filter as pill buttons */}
         <div className="flex flex-wrap gap-2">
           {filters.map((filter) => (
@@ -80,8 +80,10 @@ const Templates = () => {
 
 
       {/* Table */}
-      <section className="my-4 mx-3"></section>
-      <TemplateTable />
+      {/* <section className="my-4 mx-3"></section> */}
+      <div className="px-4">
+        <TemplateTable />
+      </div>
     </div>
   );
 };
diff --git a/src/components/transactions/AuditModal.tsx b/src/components/transactions/AuditModal.tsx
index c12a15f..0e8227f 100644
--- a/src/components/transactions/AuditModal.tsx
+++ b/src/components/transactions/AuditModal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useLayoutEffect, useState } from "react";
 import {
     FiX,
     FiCheckCircle,
@@ -47,7 +47,7 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
     let [auditStatus, setAuditStatus] = useState([])
     let [loading, setLoading] = useState(false)
     const getAuditDetails = async () => {
-        setLoading(true)
+        // setLoading(true)
         try {
             let res = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/audit?lang=${userDetails.language || ''}`)
             // let res = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/audit?lang=hi`)
@@ -63,8 +63,9 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
         }
     }
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (accountId && transactionId) {
+            setLoading(true)
             getAuditDetails()
         }
     }, [accountId, transactionId])
@@ -272,13 +273,23 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
                             ))}
                         </div>
                     ) : (
-                        <div className="flex justify-center items-center h-full">
-                            <img
-                                src={logoRecord}
-                                alt="Record Not Found"
-                                className="w-64 h-64 opacity-70 object-contain"
-                            />
-                        </div>
+                        <>
+                            {loading
+                                ? <>
+                                    <div className="flex justify-center items-center h-full">
+                                        F e t c h i n g . . .
+                                    </div>
+                                </> :
+                                <>
+                                    <div className="flex justify-center items-center h-full">
+                                        <img
+                                            src={logoRecord}
+                                            alt="Record Not Found"
+                                            className="w-64 h-64 opacity-70 object-contain"
+                                        />
+                                    </div>
+                                </>}
+                        </>
                     )}
                 </div>
 
diff --git a/src/components/transactions/TransactionView.tsx b/src/components/transactions/TransactionView.tsx
index 2b4217e..06e8402 100644
--- a/src/components/transactions/TransactionView.tsx
+++ b/src/components/transactions/TransactionView.tsx
@@ -12,6 +12,8 @@ import { RootState } from '../../store/store';
 import { SignTypeEnum } from '../../utlity/types';
 import AuditModal from './AuditModal';
 import { FaFile } from 'react-icons/fa6';
+import { IoMdDownload } from 'react-icons/io';
+import downloadDocumentUtils from '../../utlity/downloadDocumentsUtils';
 
 // Sample recipient data — you can replace this with actual API data later
 const recipients = [
@@ -159,9 +161,9 @@ const TransactionView = () => {
                                     More
                                 </button>
 
-                                <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={`/process-step-one/${accountId}/${transactionId}`}>
                                     Edit
-                                </Link>
+                                </Link>}
 
                                 <button className='cursor-pointer border  text-[var(--primary)] border-gray-300 rounded-sm px-4 py-1 hover:bg-gray-100 font-bold' onClick={handleOpenAuditModal}>
                                     Audit
@@ -193,7 +195,7 @@ const TransactionView = () => {
                                                 <div className="flex flex-col sm:flex-row gap-4 sm:items-center">
                                                     <div>
                                                         <p className="text-slate-600 font-semibold text-xs sm:xs">{recipient.name}</p>
-                                                        <p className="text-slate-600 text-xs sm:text-xs">{recipient.email}</p>
+                                                        <p className="text-slate-600 text-xs sm:text-xs">{recipient.email} | {recipient.type}</p>
                                                         {recipient.hostEmail && (
                                                             <p className="text-xs text-gray-500 italic">
                                                                 <strong>Host:</strong> {recipient.hostEmail}
@@ -271,7 +273,12 @@ const TransactionView = () => {
                                         <div className='bg-slate-100 p-2 absolute w-full bottom-[0px]'>
                                             <p className='text-[0.7rem] text-slate-500 flex justify-end items-center'>
                                                 {/* <span> 1 of {docsD?.pages?.length}</span> */}
-                                                <span className='cursor-pointer '><Link to={`/process-step-two/${accountId}/${transactionId}`}><MdEditDocument size={16} /></Link></span>
+                                                
+                                                    <IoMdDownload 
+                                                    className='cursor-pointer'
+                                                    onClick={() => downloadDocumentUtils(accountId, transactionId, docsD.id)}
+                                                    size={18} />
+                                                
                                             </p>
 
                                         </div>
diff --git a/src/helper/LoaderUi.tsx b/src/helper/LoaderUi.tsx
index 26250e2..d0f7730 100644
--- a/src/helper/LoaderUi.tsx
+++ b/src/helper/LoaderUi.tsx
@@ -11,7 +11,7 @@ const LoaderUi = ({ classStyle = '' }: StyleProps) => {
   return (
     <div className={`absolute inset-0 flex items-center justify-center z-50 ${classStyle}`}>
       {/* Overlay */}
-      <div className="absolute inset-0 bg-black/30 opacity-60"></div>
+      <div className="absolute inset-0  opacity-60"></div>
 
       {/* Loader box */}
       <div className="w-60 relative z-10 bg-[var(--loaderBg)] flex flex-col justify-center items-center gap-2 px-16 py-8 rounded-md shadow-lg">
diff --git a/src/helper/iconMap.tsx b/src/helper/iconMap.tsx
index 08d7b18..ea3220e 100644
--- a/src/helper/iconMap.tsx
+++ b/src/helper/iconMap.tsx
@@ -10,22 +10,134 @@ import { RiDropdownList } from 'react-icons/ri';
 import { MdEmail, MdBusiness } from 'react-icons/md';
 import { FaUser } from 'react-icons/fa';
 
+// const typeToIconMap = {
+//   TEXT: <RxText />,
+//   SIGNATURE: <AiFillSignature />,
+//   INITIALS: <TbSignature />,
+//   TEMPORAL: <CiCalendarDate />,
+//   NUMBER: <MdConfirmationNumber />,
+//   IMAGE: <FaRegImage />,
+//   STAMP: <FaStamp />,
+//   CHECKBOX: <IoMdCheckboxOutline />,
+//   SELECT: <RiDropdownList />,
+//   FILE: <FaFileAlt />,
+//   ATTACHMENT: <FaFileAlt />,
+//   RADIO: <MdRadioButtonChecked />,
+//   EMAIL: <MdEmail />,
+//   NAME: <FaUser />,
+//   COMPANY: <MdBusiness />,
+// };
+
+
+
 const typeToIconMap = {
-  TEXT: <RxText />,
-  SIGNATURE: <AiFillSignature />,
-  INITIALS: <TbSignature />,
-  TEMPORAL: <CiCalendarDate />,
-  NUMBER: <MdConfirmationNumber />,
+  TEXT:
+    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M36.6673 18.8333H25.0007C24.5586 18.8333 24.1347 19.0089 23.8221 19.3215C23.5096 19.634 23.334 20.058 23.334 20.5V22.8333C23.334 23.2753 23.5096 23.6993 23.8221 24.0118C24.1347 24.3244 24.5586 24.5 25.0007 24.5C25.4427 24.5 25.8666 24.3244 26.1792 24.0118C26.4917 23.6993 26.6673 23.2753 26.6673 22.8333V22.1666H29.1673V31.6666H27.334C26.892 31.6666 26.468 31.8422 26.1555 32.1548C25.8429 32.4674 25.6673 32.8913 25.6673 33.3333C25.6673 33.7753 25.8429 34.1993 26.1555 34.5118C26.468 34.8244 26.892 35 27.334 35H34.334C34.776 35 35.1999 34.8244 35.5125 34.5118C35.8251 34.1993 36.0007 33.7753 36.0007 33.3333C36.0007 32.8913 35.8251 32.4674 35.5125 32.1548C35.1999 31.8422 34.776 31.6666 34.334 31.6666H32.5007V22.1666H35.0007V22.8333C35.0007 23.2753 35.1762 23.6993 35.4888 24.0118C35.8014 24.3244 36.2253 24.5 36.6673 24.5C37.1093 24.5 37.5333 24.3244 37.8458 24.0118C38.1584 23.6993 38.334 23.2753 38.334 22.8333V20.5C38.334 20.058 38.1584 19.634 37.8458 19.3215C37.5333 19.0089 37.1093 18.8333 36.6673 18.8333Z" fill="#FBC249" />
+      <path d="M22.5927 31.6667H18.3327V8.33333H28.3327V9.62833C28.3327 10.0704 28.5083 10.4943 28.8208 10.8068C29.1334 11.1194 29.5573 11.295 29.9993 11.295C30.4414 11.295 30.8653 11.1194 31.1779 10.8068C31.4904 10.4943 31.666 10.0704 31.666 9.62833V6.66667C31.666 6.22464 31.4904 5.80072 31.1779 5.48816C30.8653 5.17559 30.4414 5 29.9993 5H3.33268C2.89065 5 2.46673 5.17559 2.15417 5.48816C1.84161 5.80072 1.66602 6.22464 1.66602 6.66667V9.62833C1.66602 10.0704 1.84161 10.4943 2.15417 10.8068C2.46673 11.1194 2.89065 11.295 3.33268 11.295C3.77471 11.295 4.19863 11.1194 4.51119 10.8068C4.82375 10.4943 4.99935 10.0704 4.99935 9.62833V8.33333H14.9993V31.6667H10.7393C10.2973 31.6667 9.8734 31.8423 9.56084 32.1548C9.24828 32.4674 9.07268 32.8913 9.07268 33.3333C9.07268 33.7754 9.24828 34.1993 9.56084 34.5118C9.8734 34.8244 10.2973 35 10.7393 35H22.5927C23.0347 35 23.4586 34.8244 23.7712 34.5118C24.0838 34.1993 24.2593 33.7754 24.2593 33.3333C24.2593 32.8913 24.0838 32.4674 23.7712 32.1548C23.4586 31.8423 23.0347 31.6667 22.5927 31.6667Z" fill="#0D6EFD" />
+    </svg>
+  ,
+  SIGNATURE:
+    <svg width="40" height="28" viewBox="0 0 40 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M24.0801 17.5987C21.5418 19.6325 18.4018 20.647 14.7059 20.647C13.0573 20.647 11.6623 20.2612 10.5509 19.6122C9.23383 20.2583 7.82453 20.647 6.47062 20.647C2.39344 20.647 0 18.453 0 14.7647C0 14.1149 0.52672 13.5882 1.17649 13.5882C1.82625 13.5882 2.35297 14.1149 2.35297 14.7647C2.35297 17.1057 3.64945 18.2941 6.47062 18.2941C7.1664 18.2941 7.89992 18.1431 8.62586 17.8792C7.57188 16.4205 7.22195 14.5556 7.68218 12.7146C8.42484 9.74382 10.361 7.70585 12.9412 7.70585C16.0278 7.70585 17.2912 11.6365 15.7581 14.7026C15.151 15.9167 14.1543 17.0938 12.9456 18.0758C13.4687 18.2168 14.0559 18.2941 14.7059 18.2941C17.8277 18.2941 20.4095 17.4789 22.4945 15.8528L24.1591 9.74928C24.2129 9.55178 24.3174 9.3717 24.4622 9.22694L33.2857 0.403428C33.7451 -0.0560254 34.49 -0.0560254 34.9495 0.403428C35.4089 0.862881 35.4089 1.6078 34.9495 2.06718L27.3366 9.68007C27.98 10.045 28.5577 10.4822 29.0671 10.9917C29.5766 11.5012 30.0138 12.0789 30.3787 12.7222L37.9916 5.10936C38.451 4.64991 39.1959 4.64991 39.6554 5.10936C40.1148 5.56874 40.1148 6.31366 39.6554 6.77311L30.8319 15.5966C30.6871 15.7414 30.507 15.8458 30.3095 15.8997L24.0801 17.5987ZM26.0741 11.6702L25.2062 14.8526L28.3886 13.9848C28.1148 13.4805 27.7864 13.0384 27.4034 12.6554C27.0204 12.2725 26.5784 11.9441 26.0741 11.6702ZM13.6536 13.6503C14.5119 11.9338 13.9092 10.0588 12.9412 10.0588C11.6096 10.0588 10.4722 11.2561 9.96492 13.2854C9.64672 14.5583 9.92117 15.831 10.7534 16.7749C12.0156 15.9148 13.0857 14.7862 13.6536 13.6503Z" fill="#0D6EFD" />
+      <path d="M0 26.1765C0 26.8262 0.52672 27.353 1.17649 27.353H21.1765C21.8263 27.353 22.353 26.8262 22.353 26.1765C22.353 25.5267 21.8263 25 21.1765 25H1.17649C0.52672 25 0 25.5267 0 26.1765Z" fill="#FBC249" />
+    </svg>
+  ,
+  INITIALS: <svg width="39" height="36" viewBox="0 0 39 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5.91844 27.3C4.31844 27.3 3.10844 26.85 2.28844 25.95C1.46844 25.03 1.05844 23.72 1.05844 22.02V20.82H4.17844V22.26C4.17844 23.62 4.74844 24.3 5.88844 24.3C6.44844 24.3 6.86844 24.14 7.14844 23.82C7.44844 23.48 7.59844 22.94 7.59844 22.2C7.59844 21.32 7.39844 20.55 6.99844 19.89C6.59844 19.21 5.85844 18.4 4.77844 17.46C3.41844 16.26 2.46844 15.18 1.92844 14.22C1.38844 13.24 1.11844 12.14 1.11844 10.92C1.11844 9.26 1.53844 7.98 2.37844 7.08C3.21844 6.16 4.43844 5.7 6.03844 5.7C7.61844 5.7 8.80844 6.16 9.60844 7.08C10.4284 7.98 10.8384 9.28 10.8384 10.98V11.85H7.71844V10.77C7.71844 10.05 7.57844 9.53 7.29844 9.21C7.01844 8.87 6.60844 8.7 6.06844 8.7C4.96844 8.7 4.41844 9.37 4.41844 10.71C4.41844 11.47 4.61844 12.18 5.01844 12.84C5.43844 13.5 6.18844 14.3 7.26844 15.24C8.64844 16.44 9.59844 17.53 10.1184 18.51C10.6384 19.49 10.8984 20.64 10.8984 21.96C10.8984 23.68 10.4684 25 9.60844 25.92C8.76844 26.84 7.53844 27.3 5.91844 27.3ZM12.7905 6H17.5005L19.6005 21.03H19.6605L21.7605 6H26.4705V27H23.3505V11.1H23.2905L20.8905 27H18.1305L15.7305 11.1H15.6705V27H12.7905V6ZM28.9331 6H37.9331V9H32.2331V14.55H36.7631V17.55H32.2331V24H37.9331V27H28.9331V6Z" fill="#0D6EFD" />
+    <path d="M0.398438 29.4H38.5931V31.8H0.398438V29.4Z" fill="#0D6EFD" />
+    <rect y="29" width="39" height="3" fill="#FBC249" />
+  </svg>,
+  TEMPORAL:
+    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M13.3333 3.33334V8.33334M26.6667 3.33334V8.33334M5.83333 15.15H34.1667M35 14.1667V28.3333C35 33.3333 32.5 36.6667 26.6667 36.6667H13.3333C7.5 36.6667 5 33.3333 5 28.3333V14.1667C5 9.16668 7.5 5.83334 13.3333 5.83334H26.6667C32.5 5.83334 35 9.16668 35 14.1667Z" stroke="#0D6EFD" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M26.1583 22.8333H26.1733M26.1583 27.8333H26.1733M19.9916 22.8333H20.0083M19.9916 27.8333H20.0083M13.8233 22.8333H13.84M13.8233 27.8333H13.84" stroke="#FBC249" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+  ,
+  NUMBER:
+    <svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M30.6157 2L21.8867 34.5769" stroke="#FBC249" stroke-width="3.38462" stroke-linecap="round" />
+      <path d="M15.6528 2L6.92383 34.5769" stroke="#FBC249" stroke-width="3.38462" stroke-linecap="round" />
+      <path d="M34.9991 13H3.69141" stroke="#0D6EFD" stroke-width="3.38462" stroke-linecap="round" />
+      <path d="M33.3077 24.8462H2" stroke="#0D6EFD" stroke-width="3.38462" stroke-linecap="round" />
+    </svg>
+  ,
   IMAGE: <FaRegImage />,
-  STAMP: <FaStamp />,
-  CHECKBOX: <IoMdCheckboxOutline />,
-  SELECT: <RiDropdownList />,
+  STAMP: <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_575_574)">
+      <mask id="mask0_575_574" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="40">
+        <path d="M0 3.8147e-06H40V40H0V3.8147e-06Z" fill="white" />
+      </mask>
+      <g mask="url(#mask0_575_574)">
+        <path d="M32.8125 29.7656H7.1875C7.1875 26.3138 9.9857 23.5156 13.4375 23.5156H26.5625C30.0143 23.5156 32.8125 26.3138 32.8125 29.7656Z" stroke="#0D6EFD" stroke-width="2.34375" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M37.2656 38.8281H2.73437C1.87141 38.8281 1.17188 38.1285 1.17188 37.2656V31.3281C1.17188 30.4651 1.87141 29.7656 2.73437 29.7656H37.2656C38.1286 29.7656 38.8281 30.4651 38.8281 31.3281V37.2656C38.8281 38.1285 38.1286 38.8281 37.2656 38.8281Z" stroke="#FBC249" stroke-width="2.34375" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M26.8428 8.924C27.3573 4.80775 24.1476 1.17182 19.9993 1.17182C15.8509 1.17182 12.6413 4.80775 13.1558 8.924L14.9797 23.5156H25.0188L26.8428 8.924Z" stroke="#0D6EFD" stroke-width="2.34375" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+      </g>
+    </g>
+    <defs>
+      <clipPath id="clip0_575_574">
+        <rect width="40" height="40" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+  ,
+  CHECKBOX:
+    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M18.3341 26.25C18.1699 26.2504 18.0072 26.2182 17.8556 26.1553C17.704 26.0923 17.5664 25.9999 17.4507 25.8833L12.4507 20.8833C12.2299 20.6464 12.1097 20.333 12.1154 20.0091C12.1211 19.6853 12.2523 19.3763 12.4814 19.1473C12.7104 18.9183 13.0193 18.7871 13.3432 18.7814C13.667 18.7757 13.9804 18.8959 14.2174 19.1167L18.3341 23.2317L27.4507 14.1167C27.6877 13.8959 28.0011 13.7757 28.3249 13.7814C28.6488 13.7871 28.9577 13.9183 29.1868 14.1473C29.4158 14.3763 29.547 14.6853 29.5527 15.0091C29.5584 15.333 29.4382 15.6464 29.2174 15.8833L19.2174 25.8833C19.1018 25.9999 18.9641 26.0923 18.8125 26.1553C18.6609 26.2182 18.4982 26.2504 18.3341 26.25Z" fill="#FBC249" />
+      <path d="M30.0007 37.9167H10.0007C7.90183 37.914 5.88973 37.0791 4.40564 35.595C2.92156 34.1109 2.08663 32.0988 2.08398 30V10C2.08663 7.90119 2.92156 5.88909 4.40564 4.405C5.88973 2.92091 7.90183 2.08599 10.0007 2.08334H30.0007C32.0995 2.08599 34.1116 2.92091 35.5957 4.405C37.0798 5.88909 37.9147 7.90119 37.9173 10V30C37.9147 32.0988 37.0798 34.1109 35.5957 35.595C34.1116 37.0791 32.0995 37.914 30.0007 37.9167ZM10.0007 4.58334C8.5646 4.58511 7.18788 5.15636 6.17244 6.1718C5.157 7.18724 4.58575 8.56396 4.58398 10V30C4.58575 31.4361 5.157 32.8128 6.17244 33.8282C7.18788 34.8437 8.5646 35.4149 10.0007 35.4167H30.0007C31.4367 35.4149 32.8134 34.8437 33.8289 33.8282C34.8443 32.8128 35.4156 31.4361 35.4173 30V10C35.4156 8.56396 34.8443 7.18724 33.8289 6.1718C32.8134 5.15636 31.4367 4.58511 30.0007 4.58334H10.0007Z" fill="#0D6EFD" />
+    </svg>
+  ,
+  SELECT:
+    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M20 34.1666C19.6667 34.1666 19.3333 34 19 33.8333L5.66666 23.8333C4.99999 23.3333 4.83332 22.1666 5.33332 21.5C5.83332 20.8333 6.99999 20.6666 7.66666 21.1666L20 30.3333L32.3333 21.1666C33 20.6666 34.1667 20.8333 34.6667 21.5C35.1667 22.1666 35 23.3333 34.3333 23.8333L21 33.8333C20.6667 34 20.3333 34.1666 20 34.1666Z" fill="#0D6EFD" />
+      <path d="M33.3333 9.16665H6.66667C5.66667 9.16665 5 8.49998 5 7.49998C5 6.49998 5.66667 5.83331 6.66667 5.83331H33.3333C34.3333 5.83331 35 6.49998 35 7.49998C35 8.49998 34.3333 9.16665 33.3333 9.16665Z" fill="#FBC249" />
+      <path d="M33.3333 15.8333H6.66667C5.66667 15.8333 5 15.1667 5 14.1667C5 13.1667 5.66667 12.5 6.66667 12.5H33.3333C34.3333 12.5 35 13.1667 35 14.1667C35 15.1667 34.3333 15.8333 33.3333 15.8333Z" fill="#FBC249" />
+    </svg>
+  ,
   FILE: <FaFileAlt />,
-  ATTACHMENT: <FaFileAlt />,
-  RADIO: <MdRadioButtonChecked />,
-  EMAIL: <MdEmail />,
-  NAME: <FaUser />,
-  COMPANY: <MdBusiness />,
+  ATTACHMENT:
+    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M20.3329 19.6667L17.9829 22.0167C16.6829 23.3167 16.6829 25.4333 17.9829 26.7333C19.2829 28.0333 21.3996 28.0333 22.6996 26.7333L26.3996 23.0333C27.6482 21.7811 28.3493 20.085 28.3493 18.3167C28.3493 16.5484 27.6482 14.8522 26.3996 13.6C25.1474 12.3514 23.4513 11.6503 21.6829 11.6503C19.9146 11.6503 18.2185 12.3514 16.9663 13.6L12.9329 17.6333C12.4019 18.1639 11.9806 18.794 11.6932 19.4875C11.4058 20.181 11.2578 20.9243 11.2578 21.675C11.2578 22.4257 11.4058 23.169 11.6932 23.8625C11.9806 24.556 12.4019 25.1861 12.9329 25.7167" stroke="#FBC249" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M15.0007 36.6667H25.0007C33.334 36.6667 36.6673 33.3333 36.6673 25V15C36.6673 6.66668 33.334 3.33334 25.0007 3.33334H15.0007C6.66732 3.33334 3.33398 6.66668 3.33398 15V25C3.33398 33.3333 6.66732 36.6667 15.0007 36.6667Z" stroke="#0D6EFD" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+  ,
+  RADIO:
+    <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M18 1.125C27.3139 1.125 34.875 8.68612 34.875 18C34.875 27.3139 27.3139 34.875 18 34.875C8.68612 34.875 1.125 27.3139 1.125 18C1.125 8.68612 8.68612 1.125 18 1.125ZM18 3.375C9.92812 3.375 3.375 9.92812 3.375 18C3.375 26.0719 9.92812 32.625 18 32.625C26.0719 32.625 32.625 26.0719 32.625 18C32.625 9.92812 26.0719 3.375 18 3.375Z" fill="#0D6EFD" />
+      <path d="M27 18C27 13.0331 22.9669 9 18 9C13.0331 9 9 13.0331 9 18C9 22.9669 13.0331 27 18 27C22.9669 27 27 22.9669 27 18Z" fill="#FBC249" />
+    </svg>
+  ,
+  EMAIL:
+    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M13.8903 4.5H26.1098C28.845 4.49996 31.0496 4.49992 32.7836 4.73304C34.5838 4.97508 36.0994 5.49286 37.3034 6.6967C38.5072 7.90054 39.025 9.41628 39.267 11.2165C39.5 12.9504 39.5 15.1551 39.5 17.8903V22.1098C39.5 24.845 39.5 27.0496 39.267 28.7836C39.025 30.5838 38.5072 32.0994 37.3034 33.3034C36.0994 34.5072 34.5838 35.025 32.7836 35.267C31.0496 35.5 28.845 35.5 26.1098 35.5H13.8903C11.1551 35.5 8.95044 35.5 7.2165 35.267C5.41628 35.025 3.90054 34.5072 2.6967 33.3034C1.49287 32.0994 0.975079 30.5838 0.733047 28.7836C0.499925 27.0496 0.499959 24.845 0.500001 22.1098V17.8903C0.499959 15.1551 0.499925 12.9504 0.733047 11.2165C0.975079 9.41628 1.49287 7.90054 2.6967 6.6967C3.90054 5.49286 5.41628 4.97508 7.2165 4.73304C8.95044 4.49992 11.1551 4.49996 13.8903 4.5ZM7.61624 7.7063C6.1487 7.9036 5.37154 8.2645 4.81802 8.81802C4.2645 9.37154 3.9036 10.1487 3.7063 11.6162C3.50318 13.1269 3.5 15.1292 3.5 18V22C3.5 24.8708 3.50318 26.873 3.7063 28.3838C3.9036 29.8514 4.2645 30.6284 4.81802 31.182C5.37154 31.7356 6.1487 32.0964 7.61624 32.2938C9.12694 32.4968 11.1292 32.5 14 32.5H26C28.8708 32.5 30.873 32.4968 32.3838 32.2938C33.8514 32.0964 34.6284 31.7356 35.182 31.182C35.7356 30.6284 36.0964 29.8514 36.2938 28.3838C36.4968 26.873 36.5 24.8708 36.5 22V18C36.5 15.1292 36.4968 13.1269 36.2938 11.6162C36.0964 10.1487 35.7356 9.37154 35.182 8.81802C34.6284 8.2645 33.8514 7.9036 32.3838 7.7063C30.873 7.50318 28.8708 7.5 26 7.5H14C11.1292 7.5 9.12694 7.50318 7.61624 7.7063Z" fill="#0D6EFD" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M6.75183 13.168C7.21135 12.4787 8.14267 12.2924 8.83195 12.7519L14.1756 16.3143C15.816 17.4079 16.9479 18.1601 17.8927 18.6516C18.8049 19.1261 19.4187 19.2889 19.9999 19.2889C20.5811 19.2889 21.1949 19.1261 22.1071 18.6516C23.0519 18.1601 24.1839 17.4079 25.8243 16.3143L31.1679 12.7519C31.8571 12.2924 32.7885 12.4787 33.2479 13.168C33.7075 13.8572 33.5213 14.7886 32.8319 15.2481L27.4191 18.8567C25.8647 19.893 24.5979 20.7374 23.4917 21.313C22.3365 21.914 21.2353 22.289 19.9999 22.289C18.7645 22.289 17.6634 21.914 16.5082 21.313C15.4019 20.7374 14.1351 19.893 12.5807 18.8566L7.16785 15.2481C6.47857 14.7886 6.29231 13.8572 6.75183 13.168Z" fill="#FBC249" />
+    </svg>
+  ,
+  NAME:
+    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M34.3169 36.6667C34.3169 30.2167 27.9003 25 20.0003 25C12.1003 25 5.68359 30.2167 5.68359 36.6667" stroke="#0D6EFD" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M25.8919 17.5592C24.3291 19.122 22.2095 20 19.9993 20C17.7892 20 15.6696 19.122 14.1068 17.5592C12.544 15.9964 11.666 13.8768 11.666 11.6666C11.666 9.45651 12.544 7.33689 14.1068 5.77409C15.6696 4.21129 17.7892 3.33331 19.9993 3.33331C22.2095 3.33331 24.3291 4.21129 25.8919 5.77409C27.4547 7.33689 28.3327 9.45651 28.3327 11.6666C28.3327 13.8768 27.4547 15.9964 25.8919 17.5592Z" stroke="#FBC249" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+  ,
+  COMPANY:
+    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M37.5 36.25H36.25V5C36.25 2.9375 34.5625 1.25 32.5 1.25H17.5C15.4375 1.25 13.75 2.9375 13.75 5V7.5H7.5C5.4375 7.5 3.75 9.1875 3.75 11.25V36.25H2.5C1.8125 36.25 1.25 36.8125 1.25 37.5C1.25 38.1875 1.8125 38.75 2.5 38.75H37.5C38.1875 38.75 38.75 38.1875 38.75 37.5C38.75 36.8125 38.1875 36.25 37.5 36.25ZM26.25 33.75H33.75V36.25H26.25V33.75ZM16.25 5C16.25 4.3125 16.8125 3.75 17.5 3.75H32.5C33.1875 3.75 33.75 4.3125 33.75 5V31.25H26.25V11.25C26.25 9.1875 24.5625 7.5 22.5 7.5H16.25V5ZM6.25 11.25C6.25 10.5625 6.8125 10 7.5 10H22.5C23.1875 10 23.75 10.5625 23.75 11.25V36.25H20V29.375C20.6875 29.375 21.25 28.8125 21.25 28.125C21.25 27.4375 20.6875 26.875 20 26.875H10C9.3125 26.875 8.75 27.4375 8.75 28.125C8.75 28.8125 9.3125 29.375 10 29.375V36.25H6.25V11.25ZM17.5 29.375V36.25H12.5V29.375H17.5Z" fill="#0D6EFD" />
+      <path d="M9.375 14.375H10.0375C10.725 14.375 11.2875 13.8125 11.2875 13.125C11.2875 12.4375 10.725 11.875 10.0375 11.875H9.375C8.6875 11.875 8.125 12.4375 8.125 13.125C8.125 13.8125 8.6875 14.375 9.375 14.375Z" fill="#FBC249" />
+      <path d="M14.6758 14.375H15.3383C16.0258 14.375 16.5883 13.8125 16.5883 13.125C16.5883 12.4375 16.0258 11.875 15.3383 11.875H14.6758C13.9883 11.875 13.4258 12.4375 13.4258 13.125C13.4258 13.8125 13.9883 14.375 14.6758 14.375Z" fill="#FBC249" />
+      <path d="M19.9629 14.375H20.6254C21.3129 14.375 21.8754 13.8125 21.8754 13.125C21.8754 12.4375 21.3129 11.875 20.6254 11.875H19.9629C19.2754 11.875 18.7129 12.4375 18.7129 13.125C18.7129 13.8125 19.2754 14.375 19.9629 14.375Z" fill="#FBC249" />
+      <path d="M9.375 19.375H10.0375C10.725 19.375 11.2875 18.8125 11.2875 18.125C11.2875 17.4375 10.725 16.875 10.0375 16.875H9.375C8.6875 16.875 8.125 17.4375 8.125 18.125C8.125 18.8125 8.6875 19.375 9.375 19.375Z" fill="#FBC249" />
+      <path d="M14.6758 19.375H15.3383C16.0258 19.375 16.5883 18.8125 16.5883 18.125C16.5883 17.4375 16.0258 16.875 15.3383 16.875H14.6758C13.9883 16.875 13.4258 17.4375 13.4258 18.125C13.4258 18.8125 13.9883 19.375 14.6758 19.375Z" fill="#FBC249" />
+      <path d="M19.9629 19.375H20.6254C21.3129 19.375 21.8754 18.8125 21.8754 18.125C21.8754 17.4375 21.3129 16.875 20.6254 16.875H19.9629C19.2754 16.875 18.7129 17.4375 18.7129 18.125C18.7129 18.8125 19.2754 19.375 19.9629 19.375Z" fill="#FBC249" />
+      <path d="M10.0375 24.375C10.725 24.375 11.2875 23.8125 11.2875 23.125C11.2875 22.4375 10.725 21.875 10.0375 21.875H9.375C8.6875 21.875 8.125 22.4375 8.125 23.125C8.125 23.8125 8.6875 24.375 9.375 24.375H10.0375Z" fill="#FBC249" />
+      <path d="M14.6758 24.375H15.3383C16.0258 24.375 16.5883 23.8125 16.5883 23.125C16.5883 22.4375 16.0258 21.875 15.3383 21.875H14.6758C13.9883 21.875 13.4258 22.4375 13.4258 23.125C13.4258 23.8125 13.9883 24.375 14.6758 24.375Z" fill="#FBC249" />
+      <path d="M19.9629 24.375H20.6254C21.3129 24.375 21.8754 23.8125 21.8754 23.125C21.8754 22.4375 21.3129 21.875 20.6254 21.875H19.9629C19.2754 21.875 18.7129 22.4375 18.7129 23.125C18.7129 23.8125 19.2754 24.375 19.9629 24.375Z" fill="#FBC249" />
+      <path d="M29.375 13.75H30.625C31.3125 13.75 31.875 13.1875 31.875 12.5C31.875 11.8125 31.3125 11.25 30.625 11.25H29.375C28.6875 11.25 28.125 11.8125 28.125 12.5C28.125 13.1875 28.6875 13.75 29.375 13.75Z" fill="#FBC249" />
+      <path d="M29.375 18.75H30.625C31.3125 18.75 31.875 18.1875 31.875 17.5C31.875 16.8125 31.3125 16.25 30.625 16.25H29.375C28.6875 16.25 28.125 16.8125 28.125 17.5C28.125 18.1875 28.6875 18.75 29.375 18.75Z" fill="#FBC249" />
+      <path d="M29.375 23.75H30.625C31.3125 23.75 31.875 23.1875 31.875 22.5C31.875 21.8125 31.3125 21.25 30.625 21.25H29.375C28.6875 21.25 28.125 21.8125 28.125 22.5C28.125 23.1875 28.6875 23.75 29.375 23.75Z" fill="#FBC249" />
+      <path d="M29.375 28.75H30.625C31.3125 28.75 31.875 28.1875 31.875 27.5C31.875 26.8125 31.3125 26.25 30.625 26.25H29.375C28.6875 26.25 28.125 26.8125 28.125 27.5C28.125 28.1875 28.6875 28.75 29.375 28.75Z" fill="#FBC249" />
+    </svg>
+  ,
 };
 
+
 export default typeToIconMap;
diff --git a/src/index.css b/src/index.css
index 257b4ee..611551f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -52,7 +52,8 @@
   --sidebarDropDownBg : #003C78;
   --sidebarMenuCol : #FFFFFF;
   --documentUploadBg :#FFFFFF;
-  --mainPrimaryBtn : #077DEC
+  --mainPrimaryBtn : #077DEC;
+  --dashBoardStartNowBtn : #077DEC;
 
 
 
diff --git a/src/store/slices/documentSlice.ts b/src/store/slices/documentSlice.ts
index 29c7ccd..fba7560 100644
--- a/src/store/slices/documentSlice.ts
+++ b/src/store/slices/documentSlice.ts
@@ -2,6 +2,7 @@ import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
 import { toast, Bounce } from 'react-toastify';
 import api from '../../config/api';
 import { hideLoader, showLoader } from './loaderSlice';
+import { AxiosError } from 'axios';
 // import { showLoader, hideLoader } from '../loader/loaderSlice';
 
 // -----------------------
@@ -19,18 +20,35 @@ export interface Document {
 // -----------------------
 // Initial State
 // -----------------------
+
+
+
+export enum DocumentErrorEnum {
+  UNSUPPORTED_DOC_TYPE = "UNSUPPORTED_DOC_TYPE",
+  FILE_SIZE_EXCEEDED = "FILE_SIZE_EXCEEDED"
+}
+
+export interface DocumentErrorInt {
+  [DocumentErrorEnum.UNSUPPORTED_DOC_TYPE]: string[];
+  [DocumentErrorEnum.FILE_SIZE_EXCEEDED]: string[];
+}
+
 interface DocumentState {
   documents: Document[];
   loading: boolean;
-  error: string | null;
+  error: DocumentErrorInt;
 }
 
 const initialState: DocumentState = {
   documents: [],
   loading: false,
-  error: null,
+  error: {
+    [DocumentErrorEnum.UNSUPPORTED_DOC_TYPE]: [],
+    [DocumentErrorEnum.FILE_SIZE_EXCEEDED]: []
+  },
 };
 
+
 // -----------------------
 // Thunk: Fetch Documents
 // -----------------------
@@ -67,6 +85,8 @@ export const fetchDocuments = createAsyncThunk<
 // Thunk: Upload Documents
 // -----------------------
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+
 export const uploadDocuments = createAsyncThunk<
   Document[],
   { formData: FormData; accountId: string; transactionId: string }
@@ -79,26 +99,54 @@ export const uploadDocuments = createAsyncThunk<
       const state = getState() as {
         selectedRecipients: { transactionTemplateToggle: string };
       };
+
       const toggle = state.selectedRecipients.transactionTemplateToggle;
 
       let response = [];
-      // debugger
+
       for (let i = 0; i < formData.getAll("file").length; i++) {
+        const currentFile = formData.getAll("file")[i] as File;
+
+        // ---- Client-side validation ----
+        if (currentFile.type !== "application/pdf") {
+          response.push({
+            error: true,
+            docName: currentFile.name,
+            reason: DocumentErrorEnum.UNSUPPORTED_DOC_TYPE,
+          });
+          continue; // skip upload
+        }
+
+        if (currentFile.size > 10 * 1024 * 1024) {
+          response.push({
+            error: true,
+            docName: currentFile.name,
+            reason: DocumentErrorEnum.FILE_SIZE_EXCEEDED,
+          });
+          continue; // skip upload
+        }
+
         const file = new FormData();
-        file.append("file", formData.getAll("file")[i]);
+        file.append("file", currentFile);
 
-        const res = await api.post(
-          `/api/accounts/${accountId}/${toggle}/${transactionId}/documents`,
-          file,
-          {
-            headers: {
-              'Content-Type': 'multipart/form-data',
-            },
+        try {
+          const res = await api.post(
+            `/api/accounts/${accountId}/${toggle}/${transactionId}/documents`,
+            file,
+            {
+              headers: {
+                'Content-Type': 'multipart/form-data',
+              },
+            }
+          );
+          response.push(res.data);
+        } catch (e: unknown) {
+          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)) {
+            response.push({ error: true, docName: (formData.getAll("file")[i] as File).name, reason: DocumentErrorEnum.FILE_SIZE_EXCEEDED });
           }
-        );
-
-        console.log(res.data);
-        response.push(res.data);
+        }
       }
 
       // await sleep(5000);
@@ -107,18 +155,92 @@ export const uploadDocuments = createAsyncThunk<
     } catch (error: any) {
       dispatch(hideLoader());
 
-      toast.error('Error Uploading Document', {
-        position: 'bottom-right',
-        autoClose: 3000,
-        theme: 'light',
-        transition: Bounce,
-      });
+      // toast.error('Error Uploading Document', {
+      //   position: 'bottom-right',
+      //   autoClose: 3000,
+      //   theme: 'light',
+      //   transition: Bounce,
+      // });
 
       return rejectWithValue('Failed Uploading Documents');
     }
   }
 );
 
+
+export const handleMultipleTransactionThunk = createAsyncThunk<
+  Document[],
+  { formData: FormData; accountId: string; transactionId: string }
+>(
+  'documents/handleMultipleTransactionThunk',
+  async ({ formData, accountId }, { dispatch, rejectWithValue, getState }) => {
+    try {
+      const state = getState() as {
+        selectedRecipients: { transactionTemplateToggle: string };
+      };
+      const toggle = state.selectedRecipients.transactionTemplateToggle;
+      let response = [];
+
+      for (let i = 0; i < formData.getAll("file").length; i++) {
+        const currentFile = formData.getAll("file")[i] as File;
+
+        dispatch(showLoader(`Creating Transaction ${i + 1} ...`));
+        const transactionRes = await api.post(`/api/accounts/${accountId}/transactions`, { "subject": currentFile.name });
+        const transactionId = transactionRes.data.id
+        dispatch(showLoader('Uploading documents...'));
+
+        // ---- Client-side validation ----
+        if (currentFile.type !== "application/pdf") {
+          response.push({
+            error: true,
+            docName: currentFile.name,
+            reason: DocumentErrorEnum.UNSUPPORTED_DOC_TYPE,
+          });
+          continue; // skip upload
+        }
+
+        if (currentFile.size > 10 * 1024 * 1024) {
+          response.push({
+            error: true,
+            docName: currentFile.name,
+            reason: DocumentErrorEnum.FILE_SIZE_EXCEEDED,
+          });
+          continue; // skip upload
+        }
+
+        const file = new FormData();
+        file.append("file", currentFile);
+
+        try {
+          const res = await api.post(
+            `/api/accounts/${accountId}/${toggle}/${transactionId}/documents`,
+            file,
+            {
+              headers: {
+                'Content-Type': 'multipart/form-data',
+              },
+            }
+          );
+          response.push(res.data);
+        } catch (e: unknown) {
+          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)) {
+            response.push({ error: true, docName: (formData.getAll("file")[i] as File).name, reason: DocumentErrorEnum.FILE_SIZE_EXCEEDED });
+          }
+        }
+      }
+
+      // await sleep(5000);
+      dispatch(hideLoader());
+      return [...response];
+    } catch (error: any) {
+      dispatch(hideLoader());
+      return rejectWithValue('Failed Uploading Documents');
+    }
+  }
+);
+
 // -----------------------
 // Slice
 // -----------------------
@@ -129,6 +251,9 @@ const documentsSlice = createSlice({
     setDocuments: (state, action: PayloadAction<Document[]>) => {
       state.documents = action.payload;
     },
+    clearDocumentUploadErrors: (state) => {
+      state.error = initialState.error;
+    },
     setDocProgComplete: (state, action: PayloadAction<string>) => {
       const docIndex = state.documents.findIndex(doc => doc.id === action.payload);
       if (docIndex !== -1) {
@@ -147,7 +272,7 @@ const documentsSlice = createSlice({
       // fetchDocuments
       .addCase(fetchDocuments.pending, (state) => {
         state.loading = true;
-        state.error = null;
+        state.error = initialState.error;
       })
       .addCase(fetchDocuments.fulfilled, (state, action: PayloadAction<Document[]>) => {
         state.loading = false;
@@ -155,35 +280,42 @@ const documentsSlice = createSlice({
       })
       .addCase(fetchDocuments.rejected, (state, action) => {
         state.loading = false;
-        state.error = action.payload as string;
-        toast.error('Failed to fetch documents', {
-          position: 'bottom-right',
-          autoClose: 3000,
-          theme: 'light',
-          transition: Bounce,
-        });
+        state.error = initialState.error;
+        // toast.error('Failed to fetch documents', {
+        //   position: 'bottom-right',
+        //   autoClose: 3000,
+        //   theme: 'light',
+        //   transition: Bounce,
+        // });
       })
 
       // uploadDocuments
       .addCase(uploadDocuments.pending, (state) => {
         state.loading = true;
-        state.error = null;
+        state.error = initialState.error;
       })
       .addCase(uploadDocuments.fulfilled, (state, action: PayloadAction<Document[]>) => {
         state.loading = false;
         action.payload.forEach((doc, indx) => {
-          state.documents.push(doc);
+          if ("error" in doc && doc.error) {
+            if (doc.reason in state.error) {
+              (state.error[doc.reason as DocumentErrorEnum.UNSUPPORTED_DOC_TYPE | DocumentErrorEnum.FILE_SIZE_EXCEEDED]).push(doc.docName)
+            }
+          } else {
+            state.documents.push(doc);
+          }
         });
       })
       .addCase(uploadDocuments.rejected, (state, action) => {
         state.loading = false;
-        state.error = action.payload as string;
-      });
+        state.error = initialState.error;
+      })
+
   },
 });
 
 // -----------------------
 // Exports
 // -----------------------
-export const { deleteDocument, resetDocuments, setDocuments, setDocProgComplete } = documentsSlice.actions;
+export const { deleteDocument, resetDocuments, setDocuments, setDocProgComplete, clearDocumentUploadErrors } = documentsSlice.actions;
 export default documentsSlice.reducer;
diff --git a/src/store/slices/selectedRecipientsSlice.tsx b/src/store/slices/selectedRecipientsSlice.tsx
index bbc8f7f..d1c4358 100644
--- a/src/store/slices/selectedRecipientsSlice.tsx
+++ b/src/store/slices/selectedRecipientsSlice.tsx
@@ -136,9 +136,9 @@ export const fetchRecipients = createAsyncThunk<
             //     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('/process-step-two')) {
+            //     window.location.href = window.location.href.replace("process-step-two", "process-step-one") // ✅ navigate using window
+            // }
 
             return data as Recipient[];
         } catch (err: any) {
@@ -205,6 +205,19 @@ const selectedRecipientsSlice = createSlice({
                 recipient.routingOrder = routingOrder;
             }
         },
+        reorderAllRecipientAscOrder: (state) => {
+            state.recipients = state.recipients.sort((a, b) => a.routingOrder - b.routingOrder);
+        },
+        updateRecipientByIndxAndRo: (state, action: PayloadAction<{ indx1: number; ro1: number, indx2: number; ro2: number }>) => {
+            const indx1 = action.payload.indx1
+            const indx2 = action.payload.indx2
+            const ro1 = action.payload.ro1
+            const ro2 = action.payload.ro2
+
+            const temp = { ...state.recipients[indx1], routingOrder: ro1 };
+            state.recipients[indx1] = { ...state.recipients[indx2], routingOrder: ro2 };
+            state.recipients[indx2] = temp;
+        },
         updateRecipientIds: (state, action: PayloadAction<Recipient[]>) => {
             for (const recObj of state.recipients) {
                 for (const recObj2 of action.payload) {
@@ -305,7 +318,9 @@ export const {
     resetSelRecipient,
     updateRecipientOrder,
     updateRecipient,
-    resetRecipients
+    resetRecipients,
+    reorderAllRecipientAscOrder,
+    updateRecipientByIndxAndRo
 } = selectedRecipientsSlice.actions;
 
 export default selectedRecipientsSlice.reducer;
diff --git a/src/utlity/commonUtils.ts b/src/utlity/commonUtils.ts
new file mode 100644
index 0000000..a95074a
--- /dev/null
+++ b/src/utlity/commonUtils.ts
@@ -0,0 +1,12 @@
+import { Recipient } from "../store/slices/selectedRecipientsSlice";
+
+interface GetMinRoutingOrderIntProps {
+    recipients: Recipient[]
+}
+const getMinRoutingOrder = ({ recipients }: GetMinRoutingOrderIntProps): number => {
+    return recipients.reduce((min, recipient) => {
+        return Math.min(min, recipient.routingOrder ?? Infinity);
+    }, Infinity);
+};
+
+export default getMinRoutingOrder
\ No newline at end of file
diff --git a/src/utlity/downloadDocumentsUtils.ts b/src/utlity/downloadDocumentsUtils.ts
new file mode 100644
index 0000000..935bf45
--- /dev/null
+++ b/src/utlity/downloadDocumentsUtils.ts
@@ -0,0 +1,64 @@
+import api from "../config/api";
+
+// Accepts: type = 'archived' | 'combined' | 'certificate' | documentId (number or string)
+const downloadDocumentUtils = async (accountId: string, transactionId: string, type: string, includeCertificate: string | null = null) => {
+    let documentId = type;
+    let url = `/api/accounts/${accountId}/transactions/${transactionId}/documents/${documentId}`;
+    if (includeCertificate !== null) {
+        url = url + includeCertificate;
+    }
+    try {
+        const response = await api.get(url, {
+            responseType: 'blob', // in case it's a file
+        });
+
+        // Create a blob URL and trigger download
+        const blob = new Blob([response.data]);
+        // Try to extract filename from headers, fallback to default
+        let filename = "document";
+
+        //  content-disposition
+        const disposition = response.headers?.["content-disposition"];
+        if (disposition && disposition.includes("filename=")) {
+            const match = disposition.match(/filename="?([^"]+)"?/);
+            if (match?.[1]) {
+                filename = match[1];
+            }
+        } else {
+            // Fall back to content-type → extension
+            const contentType = response.headers?.["content-type"];
+            let extension = "bin";
+            if (contentType) {
+                const mimeMap: Record<string, string> = {
+                    "application/pdf": "pdf",
+                    "application/msword": "doc",
+                    "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "docx",
+                    "application/vnd.ms-excel": "xls",
+                    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "xlsx",
+                    "image/png": "png",
+                    "image/jpeg": "jpg",
+                    "text/plain": "txt",
+                    "application/zip": "zip",
+                    "text/html": "html",
+                };
+                extension = mimeMap[contentType] || "bin";
+            }
+            filename = `${documentId || "document"}.${extension}`;
+        }
+
+        const link = document.createElement('a');
+        link.href = window.URL.createObjectURL(blob);
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        setTimeout(() => {
+            window.URL.revokeObjectURL(link.href);
+            document.body.removeChild(link);
+        }, 100);
+
+    } catch (error) {
+        console.error('Error downloading document:', error);
+    }
+}
+
+export default downloadDocumentUtils;
\ No newline at end of file