diff --git a/src/components/collections/ViewCollection.jsx b/src/components/collections/ViewCollection.jsx
index b1c9cd26..f12d9f75 100644
--- a/src/components/collections/ViewCollection.jsx
+++ b/src/components/collections/ViewCollection.jsx
@@ -1,20 +1,17 @@
-import React from 'react'
-import { useCollectionContext } from '../../pages/collections/CollectionPage';
-import { useCollection } from '../../hooks/useCollections';
-import { formatUTCToLocalTime } from '../../utils/dateUtils';
-import { formatFigure } from '../../utils/appUtils';
-import Avatar from '../common/Avatar';
+import React from "react";
+import { useCollectionContext } from "../../pages/collections/CollectionPage";
+import { useCollection } from "../../hooks/useCollections";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import { formatFigure } from "../../utils/appUtils";
+import Avatar from "../common/Avatar";
 
 const ViewCollection = () => {
-    const { viewCollection } = useCollectionContext();
-     const { data, isLoading, isError, error } = useCollection(
-        viewCollection
-      );
-      console.log(data)
-      if(isLoading) return <div>isLoading...</div>;
-      if(isError) return <div>{error.message}</div>;
+  const { viewCollection } = useCollectionContext();
+  const { data, isLoading, isError, error } = useCollection(viewCollection);
+  if (isLoading) return <div>isLoading...</div>;
+  if (isError) return <div>{error.message}</div>;
   return (
-   <div className="container p-3">
+    <div className="container p-3">
       <p className="fs-5 fw-semibold">Collection Details</p>
       <div className="text-start  ">
         <div className="mb-3">
@@ -23,47 +20,98 @@ const ViewCollection = () => {
         </div>
 
         <div className="row mb-3">
-          <div className="col-md-6"><strong>Invoice Number:</strong> {data?.invoiceNumber}</div>
-          <div className="col-md-6"><strong>E-Invoice Number:</strong> {data?.eInvoiceNumber}</div>
+          <div className="col-md-6">
+            <strong>Invoice Number:</strong> {data?.invoiceNumber}
+          </div>
+          <div className="col-md-6">
+            <strong>E-Invoice Number:</strong> {data?.eInvoiceNumber}
+          </div>
         </div>
 
         <div className="row mb-3">
-          <div className="col-md-6"><strong>Project:</strong> {data?.project?.name}</div>
-          <div className="col-md-6"><strong>Status:</strong> {data?.isActive ? "Active" : "Inactive"}</div>
+          <div className="col-md-6">
+            <strong>Project:</strong> {data?.project?.name}
+          </div>
+          <div className="col-md-6">
+            <strong>Status:</strong> {data?.isActive ? "Active" : "Inactive"}
+          </div>
         </div>
 
         <div className="row mb-3">
-          <div className="col-md-6"><strong>Invoice Date:</strong> {formatUTCToLocalTime(data?.invoiceDate)}</div>
-          <div className="col-md-6"><strong>Client Submitted Date:</strong> {formatUTCToLocalTime(data?.clientSubmitedDate)}</div>
+          <div className="col-md-6">
+            <strong>Invoice Date:</strong>{" "}
+            {formatUTCToLocalTime(data?.invoiceDate)}
+          </div>
+          <div className="col-md-6">
+            <strong>Client Submitted Date:</strong>{" "}
+            {formatUTCToLocalTime(data?.clientSubmitedDate)}
+          </div>
         </div>
 
         <div className="row mb-3">
-          <div className="col-md-6"><strong>Expected Payment Date:</strong> {formatUTCToLocalTime(data?.exceptedPaymentDate)}</div>
-          <div className="col-md-6"><strong>Mark as Completed:</strong> {data?.markAsCompleted ? "Yes" : "No"}</div>
+          <div className="col-md-6">
+            <strong>Expected Payment Date:</strong>{" "}
+            {formatUTCToLocalTime(data?.exceptedPaymentDate)}
+          </div>
+          <div className="col-md-6">
+            <strong>Mark as Completed:</strong>{" "}
+            {data?.markAsCompleted ? "Yes" : "No"}
+          </div>
         </div>
 
         <div className="row mb-3">
-          <div className="col-md-6"><strong>Basic Amount:</strong> {formatFigure(data?.basicAmount, { type: "currency", currency: "INR" })}</div>
-          <div className="col-md-6"><strong>Tax Amount:</strong> {formatFigure(data?.taxAmount, { type: "currency", currency: "INR" })}</div>
+          <div className="col-md-6">
+            <strong>Basic Amount:</strong>{" "}
+            {formatFigure(data?.basicAmount, {
+              type: "currency",
+              currency: "INR",
+            })}
+          </div>
+          <div className="col-md-6">
+            <strong>Tax Amount:</strong>{" "}
+            {formatFigure(data?.taxAmount, {
+              type: "currency",
+              currency: "INR",
+            })}
+          </div>
         </div>
 
         <div className="row mb-3">
-          <div className="col-md-6"><strong>Balance Amount:</strong> {formatFigure(data?.balanceAmount, { type: "currency", currency: "INR" })}</div>
-          <div className="col-md-6"><strong>Created At:</strong> {formatUTCToLocalTime(data?.createdAt)}</div>
+          <div className="col-md-6">
+            <strong>Balance Amount:</strong>{" "}
+            {formatFigure(data?.balanceAmount, {
+              type: "currency",
+              currency: "INR",
+            })}
+          </div>
+          <div className="col-md-6">
+            <strong>Created At:</strong> {formatUTCToLocalTime(data?.createdAt)}
+          </div>
         </div>
 
         <div className="row mb-3">
-          <div className="col-md-6"><strong>Created By:</strong> <div className='d-flex align-items-center'><Avatar size='xs' firstName={data.createdBy?.firstName} lastName={data.createdBy?.lastName}/>{data?.createdBy?.firstName} {data?.createdBy?.lastName} ({data?.createdBy?.jobRoleName})</div> </div>
+          <div className="col-md-6">
+            <strong>Created By:</strong>{" "}
+            <div className="d-flex align-items-center">
+              <Avatar
+                size="xs"
+                firstName={data.createdBy?.firstName}
+                lastName={data.createdBy?.lastName}
+              />
+              {data?.createdBy?.firstName} {data?.createdBy?.lastName} (
+              {data?.createdBy?.jobRoleName})
+            </div>{" "}
+          </div>
           {/* <div className="col-md-6"><strong>Updated At:</strong> {data?.updatedAt ? formatUTCToLocalTime(data?.updatedAt) : "-"}</div> */}
         </div>
 
         {data?.receivedInvoicePayments?.length > 0 && (
           <div className="mt-4">
-            <h5>Received Payments</h5>
+            <p className="fw-semibold fs-6">Received Payments</p>
             <table className="table table-bordered mt-2">
               <thead className="table-light">
                 <tr>
-                  <th className=''>Sr,No</th>
+                  <th className="">Sr,No</th>
                   <th>Transaction ID</th>
                   <th> Received Date</th>
                   <th>Amount</th>
@@ -76,10 +124,23 @@ const ViewCollection = () => {
                     <td>{index + 1}</td>
                     <td>{payment.transactionId}</td>
                     <td>{formatUTCToLocalTime(payment.paymentReceivedDate)}</td>
-                    <td className='text-end'>{formatFigure(payment.amount, { type: "currency", currency: "INR" })}</td>
-                    <td><div className='d-flex align-items-center'>
-                        <Avatar size='xs' firstName={payment.createdBy?.firstName} lastName={payment.createdBy?.lastName}/>{payment.createdBy?.firstName} {payment.createdBy?.lastName}
-                        </div></td>
+                    <td className="text-end">
+                      {formatFigure(payment.amount, {
+                        type: "currency",
+                        currency: "INR",
+                      })}
+                    </td>
+                    <td>
+                      <div className="d-flex align-items-center">
+                        <Avatar
+                          size="xs"
+                          firstName={payment.createdBy?.firstName}
+                          lastName={payment.createdBy?.lastName}
+                        />
+                        {payment.createdBy?.firstName}{" "}
+                        {payment.createdBy?.lastName}
+                      </div>
+                    </td>
                   </tr>
                 ))}
               </tbody>
@@ -88,7 +149,7 @@ const ViewCollection = () => {
         )}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default ViewCollection
+export default ViewCollection;