diff --git a/src/components/CommonNav.tsx b/src/components/CommonNav.tsx
index d9f273c..03f4792 100644
--- a/src/components/CommonNav.tsx
+++ b/src/components/CommonNav.tsx
@@ -301,7 +301,7 @@ const CommonNav: React.FC<AccountNavProps> = () => {
             aria-expanded={open}
             aria-haspopup="true"
           >
-            <div className="w-8 h-8 rounded-full overflow-hidden bg-[var(--primaryLight2)] flex items-center justify-center text-white font-semibold text-sm shadow-md">
+            <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">
               {user ? (
                 <span className="w-full h-full object-cover p-1.5 font-bold">
                   {(user?.name?.slice(0, 2)).toUpperCase()}
@@ -316,7 +316,7 @@ const CommonNav: React.FC<AccountNavProps> = () => {
             <div className="absolute right-0 mt-2 w-72 top-8 rounded-xl shadow-xl bg-white border border-gray-200 z-50 overflow-hidden">
               <div className="px-4 py-4 bg-gradient-to-r from-blue-50 to-purple-50 border-b border-gray-100">
                 <div className="flex items-center space-x-3">
-                  <div className="w-12 h-12 rounded-full overflow-hidden bg-gradient-to-br from-green-500 to-blue-600 flex items-center justify-center text-white font-semibold shadow-md">
+                  <div className="w-12 h-12 rounded-full overflow-hidden bg-gradient-to-br from-[var(--primary)] to-blue-600 flex items-center justify-center text-white font-semibold shadow-md">
                     {user ? (
                       <span className="w-full h-full object-cover px-3 text-xl py-2.5 font-bold">
                         {(user?.name?.slice(0, 2)).toUpperCase()}
diff --git a/src/components/accounts/TransactionDataTable.tsx b/src/components/accounts/TransactionDataTable.tsx
index bb65ba8..0488efc 100644
--- a/src/components/accounts/TransactionDataTable.tsx
+++ b/src/components/accounts/TransactionDataTable.tsx
@@ -92,12 +92,14 @@ const TransactionDataTable = () => {
 
             <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                 {/* 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>
-                </div>
+                    <span className=' text-[var(--primary)] text-xs hover:underline cursor-pointer font-semibold'>View all</span>
+                </div>}
 
                 {/* Scrollable Table Container */}
-                <div className="overflow-auto max-h-[67vh] no-scrollbar">
+                <div className={`overflow-auto  no-scrollbar ${location.pathname === '/transactions' ? "min-h-[76vh] max-h-[76vh]" : "min-h-[70vh] max-h-[70vh]"}`}>
                     <table className="w-full text-sm">
                         {/* Sticky Header */}
                         <thead className="bg-gray-50 sticky top-0 z-10">
diff --git a/src/components/contacts/Contacts.tsx b/src/components/contacts/Contacts.tsx
index 7471975..e1d5d8e 100644
--- a/src/components/contacts/Contacts.tsx
+++ b/src/components/contacts/Contacts.tsx
@@ -126,7 +126,7 @@ const Contacts = () => {
                             setShowModal((prev) => !prev);
                             setActionStatus("Add")
                         }}
-                        className="flex items-center gap-2 bg-[var(--mainPrimaryBtn)] px-3 py-1.5 rounded-sm  hover:opacity-90 ">
+                        className="flex items-center gap-1 bg-gradient-to-br from-[var(--primary)] to-blue-600 px-3 py-1.5 rounded-sm  hover:opacity-90 ">
                         <IoMdAdd className="text-white" />
                         <button
                             className="text-white rounded text-sm hover:opacity-90 cursor-pointer">
@@ -134,17 +134,17 @@ const Contacts = () => {
                         </button>
                     </div>
                 </div>
-                <div className="overflow-y-auto mx-2 max-h-[79vh] rounded-xl shadow-sm border border-gray-100 no-scrollbar">
-                    <table className="min-w-full text-sm bg-white">
-                        <thead className="text-gray-500 uppercase text-xs tracking-wider sticky top-0 z-10">
+                <div className="overflow-y-auto mx-2 min-h-[76vh] max-h-[76vh] rounded-xl shadow-sm border bg-white border-gray-100 no-scrollbar">
+                    <table className="min-w-full text-sm bg-gray-50">
+                        <thead className="text-gray-600 text-xs uppercase tracking-wider border-b border-gray-200">
                             <tr>
-                                <th className="px-6 py-3 font-medium text-left">First Name</th>
-                                <th className="px-6 py-3 font-medium text-left">Last Name</th>
-                                <th className="px-6 py-3 font-medium text-left">Email</th>
-                                <th className="px-6 py-3 font-medium text-center">Actions</th>
+                                <th className="px-6 py-4 font-medium text-left">First Name</th>
+                                <th className="px-6 py-4 font-medium text-left">Last Name</th>
+                                <th className="px-6 py-4 font-medium text-left">Email</th>
+                                <th className="px-6 py-4 font-medium text-center">Actions</th>
                             </tr>
                         </thead>
-                        <tbody className="divide-y divide-gray-100">
+                        <tbody className="divide-y divide-gray-100 bg-white">
                             {loading ? (
                                 <tr>
                                     <td colSpan="4" className="relative h-100">
diff --git a/src/components/contacts/ContactsFormModal.tsx b/src/components/contacts/ContactsFormModal.tsx
index 7b5a119..c349e0c 100644
--- a/src/components/contacts/ContactsFormModal.tsx
+++ b/src/components/contacts/ContactsFormModal.tsx
@@ -170,7 +170,7 @@ const ContactFormModal = ({
 
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-white/5 backdrop-blur-sm bg-opacity-50">
+    <div className="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm bg-opacity-50 bg-black/30">
       <div className="bg-white rounded-md p-6 max-w-[700px] w-full shadow-lg relative">
         <div className="ms-2 space-y-2 max-w-[60vw]">
           <h2 className="text-lg font-medium text-slate-500">{`${actionStatus} Contact`}</h2>
@@ -262,7 +262,7 @@ const ContactFormModal = ({
               type="button"
               onClick={handleSubmit}
               disabled={loading}
-              className="bg-gray-300 px-5 py-1.5 rounded-md text-slate-700 text-sm font-medium hover:bg-opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer"
+              className="bg-gradient-to-br from-[var(--primary)] to-blue-600  px-5 py-1.5 rounded-md text-white text-sm font-medium hover:bg-opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer"
             >
               {loading ? (
                 <>
diff --git a/src/components/dashboard/Loader.tsx b/src/components/dashboard/Loader.tsx
index 8e094ca..48a0be7 100644
--- a/src/components/dashboard/Loader.tsx
+++ b/src/components/dashboard/Loader.tsx
@@ -14,7 +14,7 @@ const Loader = () => {
             <div className="z-50 absolute w-screen h-screen flex items-center justify-center bg-[var(--hideModalBg)] opacity-60"></div>
 
             {/* Loader */}
-            <div className="absolute z-50 w-screen h-screen flex items-center justify-center">
+            <div className="absolute z-50 w-screen h-screen flex items-center justify-center backdrop-blur-sm bg-opacity-50 bg-black/30">
                 <div className='bg-[var(--loaderBg)] flex flex-col justify-center items-center gap-2 px-16 py-8 rounded-md shadow-lg'>
                     <LuSignature className="text-4xl font-bold animate-text" />
                     <p>
diff --git a/src/components/dashboard/SideBar.tsx b/src/components/dashboard/SideBar.tsx
index 341a857..b6463a6 100644
--- a/src/components/dashboard/SideBar.tsx
+++ b/src/components/dashboard/SideBar.tsx
@@ -23,11 +23,11 @@ type MenuPathMap = {
 }
 
 const menuPathMap: MenuPathMap = {
-  '/': 'Home',
-  '/templates': 'Templates',
-  // '/accounts': 'Accounts',
-  '/transactions': 'Transactions',  
-  '/contacts': 'Contacts'         
+    '/': 'Home',
+    '/templates': 'Templates',
+    // '/accounts': 'Accounts',
+    '/transactions': 'Transactions',
+    '/contacts': 'Contacts'
 };
 
 const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar }) => {
@@ -78,8 +78,9 @@ const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar }) => {
                     onClick={() => setShowSideBar(!showSideBar)}
                     className='absolute top-[100%] translate-y-[-100%] right-0 bg-[var(--dashBoardBg)] p-2 rounded-tl-sm rounded-bl-sm cursor-pointer transition-colors'
                 >
-                    <div className='absolute top-[-14px] right-0 w-[14px] h-[14px] rounded-full  shadow-[5px_5px_0px_0px_rgba(237,234,235,1)]'></div>
-                    <div className='absolute bottom-[-14px] right-0 w-[14px] h-[14px] rounded-full  shadow-[5px_-5px_0px_0px_rgba(237,234,235,1)]'></div>
+                    <div className='absolute top-[-14px] right-0 w-[14px] h-[14px] rounded-full shadow-[5px_5px_0px_0px_rgba(255,255,255,1)]'></div>
+                    <div className='absolute bottom-[-14px] right-0 w-[14px] h-[14px] rounded-full shadow-[5px_-5px_0px_0px_rgba(255,255,255,1)]'></div>
+
                     {showSideBar ? (
                         <BsLayoutSidebarInsetReverse className='fill-[var(--primary)] hover:text-[var(--primary)] transition-all text-2xl' />
                     ) : (
diff --git a/src/components/home/StartNow.tsx b/src/components/home/StartNow.tsx
index 0834a75..641c8ca 100644
--- a/src/components/home/StartNow.tsx
+++ b/src/components/home/StartNow.tsx
@@ -64,7 +64,7 @@ const StartNow = () => {
                 </p>
 
                 <button
-                    className="mt-1 text-sm font-medium text-white bg-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"
+                    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"
                 >
                     Start Now
                 </button>
diff --git a/src/components/home/StartSection.tsx b/src/components/home/StartSection.tsx
index 1f36bac..1807ef3 100644
--- a/src/components/home/StartSection.tsx
+++ b/src/components/home/StartSection.tsx
@@ -83,60 +83,26 @@ 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">Upload Document</h2>
-
-            <div className="grid grid-cols-1 gap-4 h-[12vw] mx-1">
+            <h2 className="text-sm font-semibold text-gray-800 px-1 pb-2">
+                Upload Document
+            </h2>
 
+            {/* Upload card */}
+            <div className="w-full">
                 <StartNow />
-
-                {/* <div className='col-span-1 grid grid-cols-1 justify-between gap-4 bg-white rounded-xl'>
-                    {cards.map((card, index) => (
-                        <div
-                            onClick={() => handleStartSectionClick(card.link)}
-                            key={index}
-                            className={`${card.bg} w-full cursor-pointer relative border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-all flex flex-col justify-between`}
-                        >
-                           
-                            <div className="flex flex-col gap-3 ">
-                                <div className="w-9 h-9 flex items-center justify-center border border-gray-200 rounded-md bg-white">
-                                    {card.icon}
-                                </div>
-
-                                <h3 className="text-sm font-medium text-gray-500">{card.title}</h3>
-                                <p className="text-xs text-gray-700">{card.description}</p>
-                            </div>
-
-                            <div className="flex items-center justify-between mt-2">
-                                {card.buttonText ? (
-                                    <button className="text-sm cursor-pointer font-medium text-white bg-gradient-to-r from-blue-600 to-blue-500 px-4 py-2 rounded-md shadow hover:opacity-90 transition">
-                                        {card.buttonText}
-                                    </button>
-                                ) : (
-                                    <div />
-                                )}
-
-                                <FiArrowRight className="w-4 h-4 text-gray-500" />
-                            </div>
-                        </div>
-                    ))}
-                </div> */}
-
             </div>
 
-            {/* <section className='pt-2 pb-3'> */}
-            {/* <h2 className="mt-6 text-sm font-semibold text-gray-800 mb-2">Recent Activities</h2> */}
-            <div className='grid grid-cols-12 gap-2 mt-5'>
-                <section className=' col-span-6'>
+            {/* Recent Data Section */}
+            <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-2 mt-5">
+                <section className="w-full">
                     <TransactionDataTable />
                 </section>
-                <section className=' col-span-6'>
+                <section className="w-full">
                     <TemplateTable />
                 </section>
             </div>
-            {/* </section> */}
-
-
         </section>
+
     );
 };
 
diff --git a/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx b/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx
index 3ba00f5..ff8a318 100644
--- a/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx
+++ b/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx
@@ -47,45 +47,45 @@ type Signer = {
 const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
     return (
         // <div className="bg-white/60 rounded-md shadow-sm border border-gray-100 ">
-            <div className="p-6">
-                <div className="flex items-center justify-between mb-4">
-                    <h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
-                        <FaUsers className="text-blue-600" />
-                        Signature Status
-                    </h3>
-                    <span className="text-sm text-gray-600">
-                        {signers.filter(s => s.completed).length} of {signers.length} signed
-                    </span>
-                </div>
-
-                <div className="space-y-3 max-h-[50vh] overflow-y-auto no-scrollbar">
-                    {signers.map((signer) => (
-                        <div key={signer.id} className="flex items-center gap-4 p-3 bg-gradient-to-br from-gray-50 to-blue-100 rounded-lg">
-                            <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-medium">
-                                {signer.name.length > 2 ? signer.name.split(" ").map(n => n[0].toUpperCase()).join("") : signer.email.split("").map(n => n[0].toUpperCase()).join("")}
-                            </div>
-                            <div className="flex-1">
-                                <div className="font-medium text-gray-800">{signer.name}</div>
-                                <div className="text-sm text-gray-600">{signer.email}</div>
-                                <div className="text-xs text-gray-500">Order: {signer.routingOrder}</div>
-                            </div>
-                            <div className="flex items-center gap-2">
-                                {signer.completed ? (
-                                    <div className="flex items-center gap-1 px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm">
-                                        <FaCheck className="w-3 h-3" />
-                                        Signed
-                                    </div>
-                                ) : (
-                                    <div className="flex items-center gap-1 px-3 py-1 bg-orange-100 text-orange-700 rounded-full text-sm">
-                                        <FaClock className="w-3 h-3" />
-                                        Pending
-                                    </div>
-                                )}
-                            </div>
-                        </div>
-                    ))}
-                </div>
+        <div className="p-6 ">
+            <div className="flex items-center justify-evenly mb-2">
+                <h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2 ">
+                    <FaUsers className="text-blue-600" />
+                    Signature Status
+                </h3>
+                <span className="text-sm text-gray-600">
+                    {signers.filter(s => s.completed).length} of {signers.length} signed
+                </span>
             </div>
+
+            <div className="space-y-3 max-h-[20vh] overflow-y-auto no-scrollbar">
+                {signers.map((signer) => (
+                    <div key={signer.id} className="text-xs mx-auto flex items-center gap-4 p-3 w-[70vh] bg-gradient-to-br from-gray-50 to-blue-100 rounded-lg">
+                        <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-medium">
+                            {signer.name.length > 2 ? signer.name.split(" ").map(n => n[0].toUpperCase()).join("") : signer.email.split("").map(n => n[0].toUpperCase()).join("")}
+                        </div>
+                        <div className="flex-1">
+                            <div className="font-medium text-gray-800">{signer.name}</div>
+                            <div className="text-xs text-gray-600">{signer.email}</div>
+                            <div className="text-xs text-gray-500">Order: {signer.routingOrder}</div>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            {signer.completed ? (
+                                <div className="flex items-center gap-1 px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs">
+                                    <FaCheck className="w-3 h-3" />
+                                    Signed
+                                </div>
+                            ) : (
+                                <div className="flex items-center gap-1 px-3 py-1 bg-orange-100 text-orange-700 rounded-full text-xs">
+                                    <FaClock className="w-3 h-3" />
+                                    Pending
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
         // </div>
     );
 };
@@ -122,78 +122,79 @@ const SigningOrderDiagram: React.FC<{ signers: Signer[] }> = ({ signers }) => {
 
     return (
         // <div className="bg-white/60 rounded-md shadow-sm border border-gray-100">
-            <div className="p-6">
-                <h3 className="text-lg font-semibold text-gray-800 mb-4">Signing Flow</h3>
-                <div className="overflow-x-auto overflow-y-auto h-[50vh] no-scrollbar flex justify-center items-center">
-                    <div className="flex justify-center items-center gap-4 min-w-max">
-                        {/* Mail icon */}
-                        <div className="flex flex-col items-center">
-                            <div className="bg-blue-100 p-4 rounded-full">
-                                <FaEnvelope className="text-blue-600 text-2xl" />
-                            </div>
-                            <p className="text-sm text-gray-600 mt-2">Sent</p>
+        <div className="py-3">
+            <h3 className="text-lg font-semibold text-gray-800 mb-1 text-center ">
+                Signing Flow</h3>
+            <div className="overflow-x-auto overflow-y-auto h-[18vh] no-scrollbar flex justify-center items-center">
+                <div className="flex justify-center items-center gap-2 min-w-max">
+                    {/* Mail icon */}
+                    <div className="flex flex-col items-center">
+                        <div className="bg-blue-100 p-4 rounded-full">
+                            <FaEnvelope className="text-blue-600 text-2xl" />
                         </div>
+                        <p className="text-sm text-gray-600 mt-2">Sent</p>
+                    </div>
 
-                        {/* Dotted line */}
-                        <div className="flex items-center mb-3">
-                            <div className="w-16 border-t-2 border-dotted border-gray-300"></div>
-                        </div>
+                    {/* Dotted line */}
+                    <div className="flex items-center mb-3">
+                        <div className="w-16 border-t-2 border-dotted border-gray-300"></div>
+                    </div>
 
-                        {/* Signers by routing order */}
-                        <div className="flex items-center justify-center space-x-6">
-                            {sortedOrders.map((order, index) => (
-                                <React.Fragment key={order}>
-                                    <div className="flex flex-col items-center space-y-4 mb-4">
-                                        <div className="text-sm font-medium text-gray-600 mb-2">
-                                            Step {order}
-                                        </div>
-                                        <div className="flex flex-col items-center space-y-3">
-                                            {grouped[order].map((signer) => {
-                                                let bgColor = "";
-                                                let icon = null;
-
-                                                if (signer.completed) {
-                                                    bgColor = "bg-[var(--primary)]";
-                                                    icon = <FaCheck className="text-green-600" />;
-                                                } else if (order === currentProcessingOrder) {
-                                                    bgColor = "bg-yellow-500";
-                                                    icon = <FaClock className="text-yellow-800" />;
-                                                } else {
-                                                    bgColor = "bg-gray-400";
-                                                    icon = <FaLock className="text-gray-500" />;
-                                                }
-
-                                                return (
-                                                    <div key={signer.id} className="relative">
-                                                        <div
-                                                            className={`w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-semibold ${bgColor}`}
-                                                            title={signer.name}
-                                                        >
-                                                            {getInitials(signer.name)}
-                                                            <span className="absolute bottom-[-4px] right-[-8px] p-1 rounded-full bg-white shadow">
-                                                                {icon}
-                                                            </span>
-                                                        </div>
-                                                        <p className="mt-1 text-xs text-gray-600 text-center max-w-16 truncate">
-                                                            {signer.name.split(" ")[0] || signer.firstName.split(0,1)}
-                                                        </p>
-                                                    </div>
-                                                );
-                                            })}
-                                        </div>
+                    {/* Signers by routing order */}
+                    <div className="flex items-center justify-center space-x-6">
+                        {sortedOrders.map((order, index) => (
+                            <React.Fragment key={order}>
+                                <div className="flex flex-col items-center space-y-4 mb-4">
+                                    <div className="text-sm font-medium text-gray-600 mb-2">
+                                        Step {order}
                                     </div>
+                                    <div className="flex flex-col items-center space-y-3">
+                                        {grouped[order].map((signer) => {
+                                            let bgColor = "";
+                                            let icon = null;
 
-                                    {index < sortedOrders.length - 1 && (
-                                        <div className="flex items-center">
-                                            <div className="w-16 border-t-2 border-dotted border-gray-300"></div>
-                                        </div>
-                                    )}
-                                </React.Fragment>
-                            ))}
-                        </div>
+                                            if (signer.completed) {
+                                                bgColor = "bg-[var(--primary)]";
+                                                icon = <FaCheck className="text-green-600" />;
+                                            } else if (order === currentProcessingOrder) {
+                                                bgColor = "bg-yellow-500";
+                                                icon = <FaClock className="text-yellow-800" />;
+                                            } else {
+                                                bgColor = "bg-gray-400";
+                                                icon = <FaLock className="text-gray-500" />;
+                                            }
+
+                                            return (
+                                                <div key={signer.id} className="relative">
+                                                    <div
+                                                        className={`w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-semibold ${bgColor}`}
+                                                        title={signer.name}
+                                                    >
+                                                        {getInitials(signer.name)}
+                                                        <span className="absolute bottom-[-4px] right-[-8px] p-1 rounded-full bg-white shadow">
+                                                            {icon}
+                                                        </span>
+                                                    </div>
+                                                    <p className="mt-1 text-xs text-gray-600 text-center max-w-16 truncate">
+                                                        {signer.name.split(" ")[0] || signer.firstName.split(0, 1)}
+                                                    </p>
+                                                </div>
+                                            );
+                                        })}
+                                    </div>
+                                </div>
+
+                                {index < sortedOrders.length - 1 && (
+                                    <div className="flex items-center">
+                                        <div className="w-16 border-t-2 border-dotted border-gray-300"></div>
+                                    </div>
+                                )}
+                            </React.Fragment>
+                        ))}
                     </div>
                 </div>
             </div>
+        </div>
         // </div>
     );
 };
@@ -216,7 +217,7 @@ const DocumentSubmissionOptions = () => {
     // const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments)
     const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
     console.log('Line 218', selectedDocuments)
-    const [transactionData,setTransactionData] = useState({})
+    const [transactionData, setTransactionData] = useState({})
 
 
     useEffect(() => {
@@ -394,7 +395,7 @@ const DocumentSubmissionOptions = () => {
                             <h3 className="text-2xl font-bold text-gray-800 mb-2">Document Send Successfully!</h3>
                             {selectedDocuments?.map((docs) => (
                                 <p className="text-gray-600">Your document "{docs.name}" has been sent for signature.</p>
-                            ) )}
+                            ))}
                         </div>
                         <div className="bg-gray-50 rounded-lg p-4 space-y-2">
                             <div className="flex justify-between text-sm">
@@ -415,7 +416,7 @@ const DocumentSubmissionOptions = () => {
             case 'redirect':
                 return (
                     <>
-                    
+
                         <SigningOrderDiagram signers={selectedRecipients} />
                     </>
                 );
@@ -433,26 +434,25 @@ const DocumentSubmissionOptions = () => {
 
 
     return (
-        <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50 p-6">
-            <div className={`max-w-6xl mx-auto transition-all duration-700 ${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'}`}>
+        <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
+            <div className="flex items-center space-x-4 mb-3 bg-white w-full py-4 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={`max-w-4xl mx-auto transition-all  bg-white rounded-lg duration-700 ${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'}`}>
 
                 {/* Header */}
-                <div className="flex items-center space-x-4 mb-5">
-                    <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-2xl font-bold text-gray-800">🎉 Awesome! The document’s been sent for signature. 🎉</h1>
-                </div>
 
 
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-3 max-w-5xl mx-auto">
-                    {/* Left Panel - Configuration */}
+                {/* <div className="grid grid-cols-1 lg:grid-cols-2 gap-3 max-w-5xl mx-auto">
                     <div className="space-y-6 ">
 
-                        {/* Action Selection */}
+                  
                         <div className="bg-white rounded-xl shadow-sm border border-gray-200 min-h-[81vh] ">
                             <div className="p-6">
                                 <h3 className="text-lg font-semibold text-gray-800 mb-4">
@@ -502,7 +502,7 @@ const DocumentSubmissionOptions = () => {
                                                     </div>
                                                 </div>
 
-                                                {/* Selection indicator */}
+                                               
                                                 {isSelected && (
                                                     <div className="absolute top-4 right-4">
                                                         <div className="w-6 h-6 bg-[var(--primary)] rounded-full flex items-center justify-center">
@@ -517,10 +517,8 @@ const DocumentSubmissionOptions = () => {
                             </div>
                         </div>
 
-                        {/* Custom Image Section */}
+                        
                     </div>
-
-                    {/* Right Panel - Preview */}
                     <div className="space-y-6">
                         <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden sticky top-6">
                             <div className="bg-gradient-to-r from-gray-50 to-blue-50 px-6 py-2 border-b border-gray-200">
@@ -535,7 +533,25 @@ const DocumentSubmissionOptions = () => {
                             </div>
                         </div>
                     </div>
+                </div> */}
+
+                <div className="text-center pt-2  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>
+                        <h3 className="text-2xl font-bold text-gray-800 mb-2">Document Send Successfully!</h3>
+                    </div>
                 </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 className=' min-h-[30vh]'>
+                    <SignersList signers={selectedRecipients} />
+                </div>
+
             </div>
         </div>
     );
diff --git a/src/components/setting/ContactForm.tsx b/src/components/setting/ContactForm.tsx
index 2bdefe6..dbf5e01 100644
--- a/src/components/setting/ContactForm.tsx
+++ b/src/components/setting/ContactForm.tsx
@@ -213,7 +213,7 @@ const ContactForm = ({ onSubmit, loading }: Props) => {
           type="button"
           onClick={handleSubmit}
           disabled={loading}
-          className="bg-gray-300 px-5 py-2 rounded-md text-slate-700 text-sm font-medium hover:bg-opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer"
+          className="bg-gradient-to-br from-[var(--primary)] to-blue-600 px-5 py-2 rounded-md text-white text-sm font-medium hover:bg-opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer"
         >
           {loading ? (
             <>
diff --git a/src/components/setting/CreateAndInvite.tsx b/src/components/setting/CreateAndInvite.tsx
index c8d8f13..7925a26 100644
--- a/src/components/setting/CreateAndInvite.tsx
+++ b/src/components/setting/CreateAndInvite.tsx
@@ -177,7 +177,7 @@ const CreateAndInvite = ({
             <button
               type="button"
               onClick={handleCreateSubmit}
-              className="ms-1 flex items-center text-[14px] px-3 py-[1.1] bg-gray-300 text-slate-600 font-medium rounded-md border border-gray-300 hover:bg-opacity-90 transition cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed"
+              className="ms-1 flex items-center text-[14px] px-3 py-[1.1] bg-gradient-to-br from-[var(--primary)] to-blue-600 text-white font-medium rounded-md border border-gray-300 hover:bg-opacity-90 transition cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed"
               disabled={createAndInviteLoader}
             >
               {createAndInviteLoader ? (
@@ -321,7 +321,7 @@ const CreateAndInvite = ({
           <button
             type="button"
             onClick={handleInviteSubmit}
-            className="px-4 py-2 text-sm font-medium rounded-md cursor-pointer hover:bg-opacity-90 transition text-[14px] bg-gray-300 text-slate-600 disabled:opacity-60 disabled:cursor-not-allowed"
+            className="px-4 py-2 text-sm font-medium rounded-md cursor-pointer hover:bg-opacity-90 transition text-[14px] bg-gradient-to-br from-[var(--primary)] to-blue-600 text-white disabled:opacity-60 disabled:cursor-not-allowed"
             disabled={createAndInviteLoader}
           >
             {createAndInviteLoader ? (
diff --git a/src/components/setting/Signature/AddSignatureModal.tsx b/src/components/setting/Signature/AddSignatureModal.tsx
index 9a7fb94..25473ad 100644
--- a/src/components/setting/Signature/AddSignatureModal.tsx
+++ b/src/components/setting/Signature/AddSignatureModal.tsx
@@ -431,7 +431,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
     }, []);
 
     return (
-        <div className="fixed inset-0 backdrop-blur-sm bg-opacity-50 flex items-center justify-center z-50 p-4">
+        <div className="fixed inset-0 backdrop-blur-sm bg-opacity-50 bg-black/30 flex items-center justify-center z-50 p-4">
             <div className="bg-white rounded-md shadow-xl w-full max-w-[80vw] h-[80vh] flex relative">
 
                 {/* Sidebar Navigation */}
@@ -555,7 +555,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                             CANCEL
                         </button>
                         <button
-                            className="cursor-pointer px-4 py-2 text-sm font-medium rounded-md bg-[var(--modalSubmitBG)] text-white hover:bg-[var(--modalSubmitBGHover)] transition-colors flex items-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
+                            className="cursor-pointer px-4 py-2 text-sm font-medium rounded-md bg-gradient-to-br from-[var(--primary)] to-blue-600 text-white hover:bg-[var(--modalSubmitBGHover)] transition-colors flex items-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
                             onClick={handleSubmit}
                             disabled={isSubmitting}
                         >
diff --git a/src/components/setting/Signature/Signature.tsx b/src/components/setting/Signature/Signature.tsx
index cedac93..07ad865 100644
--- a/src/components/setting/Signature/Signature.tsx
+++ b/src/components/setting/Signature/Signature.tsx
@@ -119,7 +119,7 @@ const SignatureManager: React.FC = () => {
                                     <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>
-                                <button className="bg-[var(--modalSubmitBG)] hover:bg-[var(--modalSubmitBGHover)] text-white px-4 py-2 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}>
+                                <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>
diff --git a/src/components/signature/SignCon.tsx b/src/components/signature/SignCon.tsx
index 02fdf31..1a73a15 100644
--- a/src/components/signature/SignCon.tsx
+++ b/src/components/signature/SignCon.tsx
@@ -543,7 +543,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
     }, []);
 
     return (
-        <div className="fixed inset-0 backdrop-blur-sm bg-opacity-50 flex items-center justify-center z-50 p-4">
+        <div className="fixed inset-0 backdrop-blur-sm bg-opacity-50 bg-black/30 flex items-center justify-center z-50 p-4">
             <div className="bg-white rounded-md shadow-xl w-full max-w-[80vw] h-[80vh] flex relative">
 
                 {/* Sidebar Navigation */}
diff --git a/src/components/templates/TemplateTable.tsx b/src/components/templates/TemplateTable.tsx
index b04e469..1c1b75d 100644
--- a/src/components/templates/TemplateTable.tsx
+++ b/src/components/templates/TemplateTable.tsx
@@ -90,127 +90,139 @@ const TemplateTable = () => {
     }
     return (
         <>
-            <div className="overflow-y-auto  max-h-[79vh] rounded-xl shadow-sm border border-gray-100 no-scrollbar">
-                <div className="flex justify-between items-center px-6 py-4 border-b border-gray-100 bg-white">
-                    <h2 className="text-sm font-semibold text-gray-800 ">Recent Template</h2>
-                </div>
-                <table className="min-w-full text-sm bg-white">
-                    <thead className=" sticky top-0 z-10 bg-gray-100 text-gray-600 text-xs uppercase tracking-wider border-b border-gray-200">
-                        <tr>
-                            {/* <th className="px-4 py-3 w-10 text-left font-medium">
-                                <div className="w-4 h-4 border border-slate-300 rounded flex items-center justify-center">
-                                    <FaCheck className="text-purple-600 text-xs" />
-                                </div>
-                            </th> */}
-                            <th className="px-6 py-4 font-semibold  text-left">Name</th>
-                            {loaction.pathname === '/templates' && (<>
-                                <th className="px-6 py-4 font-semibold  text-left">Created</th>
-                                <th className="px-6 py-4 font-semibold  text-left">Last Updated</th>
-                            </>)}
-                                <th className="px-6 py-4 font-semibold  text-left">Use</th>
-                            <th className="px-6 py-4 font-semibold  text-left">Action</th>
-                        </tr>
-                    </thead>
+            <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+                {/* Header */}
+                {location.pathname !== '/templates' &&
+                    <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 Template</h2>
+                        <span className=' text-[var(--primary)] text-xs hover:underline cursor-pointer font-semibold'>View all</span>
+                    </div>}
 
-                    {loading ? (
-                        <tbody>
-                            <tr>
-                                <td colSpan="6" className="relative h-100">
-                                    <LoaderUi />
-                                </td>
+                {/* Scrollable Table Container */}
+                <div className={`overflow-auto no-scrollbar ${location.pathname === '/templates' ? "min-h-[76vh] max-h-[76vh]" : "min-h-[70vh] max-h-[70vh]"}`}>
+                    <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">Name</th>
+                                {location.pathname === '/templates' && (
+                                    <>
+                                        <th className="px-6 py-4 text-center font-semibold">Created</th>
+                                        <th className="px-6 py-4 text-center font-semibold">Last Updated</th>
+                                    </>
+                                )}
+                                <th className="px-6 py-4 text-center font-semibold">Use</th>
+                                <th className="px-6 py-4 text-center font-semibold">Action</th>
                             </tr>
-                        </tbody>
-                    ) : templates.length > 0 ? (
-                        <tbody className="divide-y divide-gray-100">
-                            {templates.map((item, index) => (
-                                <tr key={index} className="hover:bg-gray-50 transition-colors">
-                                    {/* <td className="px-4 py-4">
-                                        <div className="w-4 h-4 border border-slate-300 rounded flex items-center justify-center">
-                                            <FaCheck className="text-purple-600 text-xs" />
-                                        </div>
-                                    </td> */}
-                                    <td className="px-4 py-4 text-gray-800 text-left">
-                                        {item.name || 'Untitled'}
+                        </thead>
+                        {loading ? (
+                            <tbody>
+                                <tr>
+                                    <td colSpan="6" className="relative h-100">
+                                        <LoaderUi />
                                     </td>
-                                    {loaction.pathname === '/templates' && (<>
-                                        <td className="px-4 py-4 text-gray-800 text-left">
-                                            {formatTimestamp(item.createdAt)}
-                                        </td>
-                                        <td className="px-4 py-4 text-gray-800 text-left">
-                                            {formatTimestamp(item.lastModifiedAt)}
-                                        </td>
-                                    </>)}
-                                        <td
-                                            className="px-4 py-4 text-left"
-                                            onClick={() => handleUseClick(item)}
+                                </tr>
+                            </tbody>
+                        ) : templates.length > 0 ? (
+                            <>
+                                {/* Scrollable Body */}
+                                <tbody className="bg-white divide-y divide-gray-100">
+                                    {templates.map((item, index) => (
+                                        <tr
+                                            key={index}
+                                            className="hover:bg-gray-50 transition-colors duration-150"
                                         >
-                                            <span className="bg-[var(--lightGreyCol)] cursor-pointer border-gray-300 text-gray-600 hover:bg-gray-100 px-3 py-1 rounded-lg font-semibold text-[12px]">
-                                                Use
-                                            </span>
-                                        </td>
+                                            <td className="px-6 py-4 text-left">
+                                                <div className="text-gray-800 font-medium truncate max-w-xs">
+                                                    {item.name || 'Untitled'}
+                                                </div>
+                                            </td>
 
-                                    {/* Action Menu */}
-                                    <td className="px-4 py-4 text-left">
-                                        <div
-                                            className="relative inline-block"
-                                            tabIndex={0}
-                                            onBlur={(e) => {
-                                                if (!e.currentTarget.contains(e.relatedTarget)) {
-                                                    setShowMenu(null);
-                                                }
-                                            }}
-                                        >
-                                            <button
-                                                className="text-gray-400 hover:text-gray-600 p-1 focus:outline-none"
-                                                onClick={() =>
-                                                    setShowMenu(showMenu === index ? null : index)
-                                                }
-                                            >
-                                                <PiDotsThreeOutlineVerticalFill className="text-lg ms-4" />
-                                            </button>
+                                            {location.pathname === '/templates' && (
+                                                <>
+                                                    <td className="px-6 py-4 text-center">
+                                                        <span className="text-gray-600 whitespace-nowrap">
+                                                            {formatTimestamp(item.createdAt)}
+                                                        </span>
+                                                    </td>
+                                                    <td className="px-6 py-4 text-center">
+                                                        <span className="text-gray-600 whitespace-nowrap">
+                                                            {formatTimestamp(item.lastModifiedAt)}
+                                                        </span>
+                                                    </td>
+                                                </>
+                                            )}
 
-                                            {showMenu === index && (
+                                            <td className="px-6 py-4 text-center">
+                                                <button
+                                                    className="bg-[var(--lightGreyCol)] cursor-pointer border-gray-300 text-gray-600 hover:bg-gray-100 px-3 py-1 rounded-lg font-semibold text-xs transition-colors duration-150"
+                                                    onClick={() => handleUseClick(item)}
+                                                >
+                                                    Use
+                                                </button>
+                                            </td>
+
+                                            <td className="px-6 py-4 text-center">
                                                 <div
-                                                    className="absolute -top-9 right-4 bg-white border border-gray-200 rounded-lg shadow-lg z-20 min-w-[100px]"
+                                                    className="relative inline-block"
+                                                    tabIndex={0}
+                                                    onBlur={(e) => {
+                                                        if (!e.currentTarget.contains(e.relatedTarget)) {
+                                                            setShowMenu(null);
+                                                        }
+                                                    }}
                                                 >
                                                     <button
-                                                        onMouseDown={() => handleEditClick(item.id)}
-                                                        className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-blue-600"
+                                                        className="text-gray-400 hover:text-gray-600 transition-colors duration-150 p-1 rounded-md hover:bg-gray-100"
+                                                        onClick={() =>
+                                                            setShowMenu(showMenu === index ? null : index)
+                                                        }
                                                     >
-                                                        Edit
-                                                    </button>
-                                                    <button
-                                                        onMouseDown={() => {
-                                                            setShowMenu(null);
-                                                            console.log('Delete clicked', item);
-                                                        }}
-                                                        className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-red-600"
-                                                    >
-                                                        Delete
+                                                        <PiDotsThreeOutlineVerticalFill className="text-lg" />
                                                     </button>
+
+                                                    {showMenu === index && (
+                                                        <div className="absolute -top-9 right-4 bg-white border border-gray-200 rounded-lg shadow-lg z-20 min-w-[100px]">
+                                                            <button
+                                                                onMouseDown={() => handleEditClick(item.id)}
+                                                                className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-blue-600"
+                                                            >
+                                                                Edit
+                                                            </button>
+                                                            <button
+                                                                onMouseDown={() => {
+                                                                    setShowMenu(null);
+                                                                    console.log('Delete clicked', item);
+                                                                }}
+                                                                className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-red-600"
+                                                            >
+                                                                Delete
+                                                            </button>
+                                                        </div>
+                                                    )}
                                                 </div>
-                                            )}
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </>
+                        ) : (
+                            <tbody>
+                                <tr>
+                                    <td colSpan="6" className="text-center py-10 text-gray-500">
+                                        <div className="flex flex-col items-center justify-center">
+                                            <img
+                                                src={logoRecord}
+                                                alt="Record Not Found"
+                                                className="w-70 h-70 mb-4 opacity-70"
+                                            />
                                         </div>
                                     </td>
                                 </tr>
-                            ))}
-                        </tbody>
-                    ) : (
-                        <tbody>
-                            <tr>
-                                <td colSpan="6" className="text-center py-10 text-gray-500">
-                                    <div className="flex flex-col items-center justify-center">
-                                        <img
-                                            src={logoRecord}
-                                            alt="Record Not Found"
-                                            className="w-70 h-70 mb-4 opacity-70"
-                                        />
-                                    </div>
-                                </td>
-                            </tr>
-                        </tbody>
-                    )}
-                </table>
+                            </tbody>
+                        )}
+                    </table>
+                </div>
             </div>
         </>
     )
diff --git a/src/components/templates/Templates.tsx b/src/components/templates/Templates.tsx
index 9ae6c49..8f0c866 100644
--- a/src/components/templates/Templates.tsx
+++ b/src/components/templates/Templates.tsx
@@ -67,7 +67,7 @@ const Templates = () => {
 
         <div
           onClick={handleAddTemplate}
-          className="flex items-center gap-2 bg-[var(--mainPrimaryBtn)] px-3 py-1.5 rounded-sm cursor-pointer hover:opacity-90">
+          className="flex items-center gap-1 bg-gradient-to-br from-[var(--primary)] to-blue-600 px-2.5 py-1.5 rounded-sm cursor-pointer hover:opacity-90">
           <IoMdAdd className="text-white" />
           <button
             className="text-white rounded text-sm hover:opacity-90">
diff --git a/src/components/transactions/TransactionView.tsx b/src/components/transactions/TransactionView.tsx
index 2335d92..01fdf25 100644
--- a/src/components/transactions/TransactionView.tsx
+++ b/src/components/transactions/TransactionView.tsx
@@ -11,6 +11,7 @@ import { useSelector } from 'react-redux';
 import { RootState } from '../../store/store';
 import { SignTypeEnum } from '../../utlity/types';
 import AuditModal from './AuditModal';
+import { FaFile } from 'react-icons/fa6';
 
 // Sample recipient data — you can replace this with actual API data later
 const recipients = [
@@ -46,34 +47,35 @@ const TransactionView = () => {
     const [signingOrderModal, setSigningOrderModal] = useState({ open: false });
     const user = useSelector((state: RootState) => state.user)
     const location = useLocation();
-  const [isModalOpen, setIsModalOpen] = useState(false);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [documentsData, setDocumentsData] = useState([])
 
-  useEffect(() => {
-    // update whenever location changes
-    setIsModalOpen(location.search.includes("auditStatus"));
-  }, [location]);
+    useEffect(() => {
+        // update whenever location changes
+        setIsModalOpen(location.search.includes("auditStatus"));
+    }, [location]);
 
-  const handleOpenAuditModal = () => {
-    const { pathname, search } = location;
-    let newSearch = search
-      ? search.includes("auditStatus")
-        ? search
-        : `${search}&auditStatus`
-      : "?auditStatus";
+    const handleOpenAuditModal = () => {
+        const { pathname, search } = location;
+        let newSearch = search
+            ? search.includes("auditStatus")
+                ? search
+                : `${search}&auditStatus`
+            : "?auditStatus";
 
-    window.history.pushState({}, "", pathname + newSearch);
-    setIsModalOpen(true); // update state immediately
-  };
+        window.history.pushState({}, "", pathname + newSearch);
+        setIsModalOpen(true); // update state immediately
+    };
 
-  const closeModal = () => {
-    let search = location.search
-      .replace(/[?&]auditStatus\b/, "")
-      .replace(/^&/, "?")
-      .replace(/\?$/, "");
+    const closeModal = () => {
+        let search = location.search
+            .replace(/[?&]auditStatus\b/, "")
+            .replace(/^&/, "?")
+            .replace(/\?$/, "");
 
-    window.history.pushState({}, "", location.pathname + search);
-    setIsModalOpen(false); //  update state immediately
-  };
+        window.history.pushState({}, "", location.pathname + search);
+        setIsModalOpen(false); //  update state immediately
+    };
 
     console.log(transactionDetails, "line 37");
 
@@ -87,8 +89,22 @@ const TransactionView = () => {
         }
     }
 
+    const fetchDocuments = async () => {
+        try {
+            const res = await api.get(`https://concrete-gladly-mullet.ngrok-free.app/api/accounts/${accountId}/transactions/${transactionId}/documents?include_images=true`)
+            if (res?.status === 200) {
+                let resDoc = res?.data
+                setDocumentsData(resDoc)
+            }
+
+        } catch (error) {
+            console.log(error)
+        }
+    }
+
     useEffect(() => {
         fetchData()
+        fetchDocuments()
     }, [accountId, transactionId])
 
 
@@ -100,7 +116,7 @@ const TransactionView = () => {
         <>
             {transactionDetails &&
                 <>
-                    <div className='mt-2 flex justify-center items-stretch w-full h-full bg-white rounded-sm'>
+                    <div className='mt-2 flex justify-center items-stretch max-w-90vw min-h-[88vh]  h-full bg-white rounded-lg  shadow-sm mx-3'>
                         <div className="w-full px-6 py-4 rounded-tl-sm text-xs border-r-2 border-gray-200 overflow-y-auto">
                             {/* Header */}
                             <h1 className='text-lg font-semibold text-gray-800'>
@@ -132,7 +148,7 @@ const TransactionView = () => {
                                 {/* <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-two/${accountId}/${transactionId}`}>
                                     Edit
                                 </Link> */}
-                                <button className='cursor-pointer border  text-green-700 border-gray-300 rounded-sm px-4 py-1 hover:bg-gray-100 font-bold' onClick={handleOpenAuditModal}>
+                                <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
                                 </button>
 
@@ -203,22 +219,25 @@ const TransactionView = () => {
                                 </div>}
                         </div>
 
-                        <div className='w-[210px] text-xs rounded-sm '>
-
-                            <div className='p-4 flex flex-col gap-2'>
-                                <p>abc.pdf</p>
-                                <div className='border-3 rounded-sm border-slate-300 relative text-xs'>
-                                    <img style={{ width: "200px", height: "160px" }} src="https://images.unsplash.com/photo-1746469535771-71a672e8719f?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
-                                    <div className='bg-slate-100 p-2 absolute w-full bottom-[0px]'>
-                                        <p className='text-[0.7rem] text-slate-500 flex justify-between items-center'>
-                                            <span> 1 of 10</span>
-                                            <span className='cursor-pointer'><Link to={`/process-step-two/${accountId}/${transactionId}`}><MdEditDocument size={16} /></Link></span>
-                                        </p>
+                        <div className='lg:w-[15vw] sm:w-[20vw] text-xs rounded-sm max-h-[88vh] overflow-y-auto no-scrollbar'>
+                            {documentsData.map((docsD, index) => (
+                                <div className='p-4 flex flex-col gap-2 cursor-pointer' key={docsD.id}>
+                                    <p>{docsD.name}</p>
+                                    <div className='border-3 rounded-sm border-slate-300 relative text-xs'>
+                                        {docsD?.pages[0]?.src ?
+                                            <img style={{ width: "200px", height: "160px" }} src={docsD?.pages[0]?.src} alt=""  loading='lazy'/>
+                                            :
+                                            <FaFile className='h-35 w-20 mx-5 text-gray-300' />}
+                                        <div className='bg-slate-100 p-2 absolute w-full bottom-[0px]'>
+                                            <p className='text-[0.7rem] text-slate-500 flex justify-between 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>
+                                            </p>
 
+                                        </div>
                                     </div>
                                 </div>
-
-                            </div>
+                            ))}
 
                         </div>