diff --git a/src/components/Documents/DocumentVersionList.jsx b/src/components/Documents/DocumentVersionList.jsx
index aea49267..5c01b9c7 100644
--- a/src/components/Documents/DocumentVersionList.jsx
+++ b/src/components/Documents/DocumentVersionList.jsx
@@ -13,6 +13,9 @@ const DocumentVersionList = ({
   isPending,
   setOpenDocument,
   VerifyDocument,
+  RejectDocument,
+  showVersions,
+  latestDoc,
 }) => {
   const canVerifyDocument = useHasUserPermission(VERIFY_DOCUMENT);
   const canDownloadDocument = useHasUserPermission(DOWNLOAD_DOCUMENT);
@@ -23,146 +26,267 @@ const DocumentVersionList = ({
     }
   };
 
-  const sortedVersions = versionList?.data
-    ? [...versionList.data].sort((a, b) => b.version - a.version)
-    : [];
-
   if (versionLoding) {
     return <VersionListSkeleton items={2} />;
   }
 
+  const sortedVersions = versionList?.data
+    ? [...versionList.data].sort((a, b) => b.version - a.version)
+    : [];
+
+  const currentDoc = sortedVersions.length ? sortedVersions[0] : latestDoc;
+
+  if (!showVersions) {
+    if (!currentDoc) {
+      return <p className="text-muted">No documents available.</p>;
+    }
+    return (
+      <>
+        <div className="list-group list-group-flush" style={{ marginTop: "-4px",  marginLeft: "10px" }}>
+          <div className="list-group-item list-group-item-action cursor-pointer" style={{ marginLeft: "-30px" }}>
+            <div className="d-flex justify-content-between">
+              {/* Left Side: Document Details */}
+              <div className="d-flex align-items-start" onClick={handleOpenDocument}>
+                <FileIcon
+                  type={currentDoc.contentType}
+                  size="fs-2"
+                  className="me-2"
+                />
+                <div>
+                  <div className="d-flex align-items-center mb-1">
+                    <span className="fw-semibold" style={{ marginTop: "-6px" }}>
+                      {currentDoc.name}
+                    </span>
+                  </div>
+                  <div className="d-flex align-items-center mb-1">
+                    {getDocuementsStatus(currentDoc.isVerified)}
+                    <span className="text-secondary ms-7 fw-semibold">
+                      File Size: {currentDoc.fileSize} Kb
+                    </span>
+                  </div>
+                  <div className="d-flex align-items-center">
+                    <small className="text-secondary fw-semibold me-2">
+                      Uploaded by
+                    </small>
+                    <Avatar
+                      size="xs"
+                      classAvatar="m-0"
+                      firstName={currentDoc.uploadedBy?.firstName}
+                      lastName={currentDoc.uploadedBy?.lastName}
+                    />
+                    <span className="ms-1">
+                      <small className="fw-normal" style={{ marginLeft: "-10px" }}>
+                        {`${currentDoc.uploadedBy?.firstName ?? ""} ${currentDoc.uploadedBy?.lastName ?? ""}`.trim() || "N/A"}
+                      </small>
+                    </span>
+                  </div>
+                  <small className="ms-2" style={{ marginRight: "-113px" }}>
+                    {formatUTCToLocalTime(currentDoc?.uploadedAt)}
+                  </small>
+                </div>
+              </div>
+
+               <div className="d-flex flex-column align-items-end" style={{ marginTop: "-8px", marginRight: "-540px" }}>
+                <span className="badge bg-success-subtle text-success">
+                  latest
+                </span>
+                
+              </div>
+              {/* Right Side: Status and Info */}
+              <div className="d-flex flex-column align-items-end" style={{ marginTop: "31px", marginRight: "21px" }}>
+                {/* <span className="badge bg-success-subtle text-success">
+                  latest
+                </span> */}
+                <div className="d-flex align-items-center mt-1">
+                  {currentDoc?.updatedBy && (
+                    <>
+                      <small className="text-secondary me-2 fw-semibold">Updated by</small>
+                      <Avatar
+                        size="xs"
+                        classAvatar="m-0"
+                        firstName={currentDoc.updatedBy?.firstName}
+                        lastName={currentDoc.updatedBy?.lastName}
+                      />
+                      <span className="ms-1" style={{ marginRight: "-37px" }}>
+                        <small className="fw-normal" style={{ marginLeft: "-10px" }}>
+                          {`${currentDoc.updatedBy?.firstName ?? ""} ${currentDoc.updatedBy?.lastName ?? ""}`.trim() || "N/A"}
+                        </small>
+                      </span>
+                    </>
+                  )}
+                </div>
+                {/* Conditionally render updated date */}
+                {currentDoc?.updatedAt && (
+                  <small className="ms-2" style={{ marginRight: "-75px" }}>
+                    {formatUTCToLocalTime(currentDoc?.updatedAt)}
+                  </small>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* Buttons Div - only for the latest pending document when showVersions is false */}
+        {currentDoc.isVerified === null && canVerifyDocument && (
+          <div className="d-flex justify-content-end mb-3 me-4">
+            {isPending ? (
+              <span className="text-muted">Please Wait...</span>
+            ) : (
+              <>
+                <button
+                  type="button"
+                  onClick={RejectDocument}
+                  className="btn btn-sm btn-danger me-2"
+                >
+                  Reject
+                </button>
+                <button
+                  type="button"
+                  onClick={VerifyDocument}
+                  className="btn btn-sm btn-primary"
+                >
+                  Verify
+                </button>
+              </>
+            )}
+          </div>
+        )}
+      </>
+    );
+  }
+
+  // If showVersions is true, display all versions
   if (!sortedVersions.length) {
     return <p className="text-muted">No documents available.</p>;
   }
 
   return (
-    <>
-      <div className="d-flex justify-content-between align-items-center mb-3">
-        <h5 className="mb-0">Documents</h5>
-        <div className="form-check form-switch">
-          <input
-            className="form-check-input"
-            type="checkbox"
-            id="showVersionsSwitch"
-          />
-          <label className="form-check-label" htmlFor="showVersionsSwitch">
-            Show Versions
-          </label>
-        </div>
-      </div>
-      <div className="accordion" id="docAccordion">
-        <div className="accordion-item shadow-none">
-          <div className="accordion-body p-2">
-            <div className="list-group list-group-flush">
-              {sortedVersions.map((document, index) => (
-                <div
-                  key={document.id}
-                  className="list-group-item list-group-item-action" style={{ marginLeft: "-30px" }}
-                >
-                  <div className="d-flex justify-content-between">
-                    {/* Left Side: Document Details */}
-                    <div className="d-flex align-items-start">
-                      <FileIcon
-                        type={document.contentType}
-                        size="fs-2"
-                        className="me-2"
-                      />
-                      <div>
-                        <div className="d-flex align-items-center mb-1">
-                          <span className="fw-normal">
-                            {document.name}
-                          </span>
-                        </div>
-                        <div className="d-flex align-items-center mb-1">
-                          {getDocuementsStatus(document.isVerified)}
-                          <span className="text-secondary ms-7">
-                            File Size: {document.fileSize} Kb
-                          </span>
-                        </div>
-                        <div className="d-flex align-items-center">
-                          <small className="text-secondary me-2">
-                            Uploaded by
+    <div className="accordion" id="docAccordion">
+      <div className="accordion-item shadow-none">
+        <div className="accordion-body p-2" style={{ marginTop: "-15px" }}>
+          <div className="list-group list-group-flush">
+            {sortedVersions.map((document, index) => (
+              <div
+                key={document.id}
+                className="list-group-item list-group-item-action cursor-pointer" style={{ marginLeft: "-30px",marginTop:"5px" }}
+              >
+                <div className="d-flex justify-content-between">
+                  {/* Left Side: Document Details */}
+                  <div className="d-flex align-items-start" onClick={handleOpenDocument}>
+                    <FileIcon
+                      type={document.contentType}
+                      size="fs-2"
+                      className="me-2"
+                    />
+                    <div>
+                      <div className="d-flex align-items-center mb-1">
+                        <span className="fw-semibold" style={{ marginTop: "-6px" }}>
+                          {document.name}
+                        </span>
+                      </div>
+                      <div className="d-flex align-items-center mb-1">
+                        {getDocuementsStatus(document.isVerified)}
+                        <span className="text-secondary ms-7 fw-semibold">
+                          File Size: {document.fileSize} Kb
+                        </span>
+                      </div>
+                      <div className="d-flex align-items-center">
+                        <small className="text-secondary fw-semibold me-2">
+                          Uploaded by
+                        </small>
+                        <Avatar
+                          size="xs"
+                          classAvatar="m-0"
+                          firstName={document.uploadedBy?.firstName}
+                          lastName={document.uploadedBy?.lastName}
+                        />
+                        <span className="ms-1">
+                          <small className="fw-normal" style={{ marginLeft: "-10px" }}>
+                            {`${document.uploadedBy?.firstName ?? ""} ${document.uploadedBy?.lastName ?? ""}`.trim() || "N/A"}
+                          </small>
+                        </span>
+                      </div>
+                      <small className="ms-2" style={{ marginRight: "-113px" }}>
+                        {formatUTCToLocalTime(document?.uploadedAt)}
+                      </small>
+                      {document?.verifiedAt && (
+                        <div className="d-flex align-items-center mt-1">
+                          <small className="text-secondary me-2 fw-semibold">
+                            {document.isVerified ? "Approved by" : "Rejected by"}
                           </small>
                           <Avatar
                             size="xs"
                             classAvatar="m-0"
-                            firstName={document.uploadedBy?.firstName}
-                            lastName={document.uploadedBy?.lastName}
+                            firstName={document.verifiedBy?.firstName}
+                            lastName={document.verifiedBy?.lastName}
                           />
                           <span className="ms-1">
-                            <small className="fw-normal">
-                              {`${document.uploadedBy?.firstName ?? ""} ${document.uploadedBy?.lastName ?? ""}`.trim() || "N/A"}
+                            <small className="fw-normal" style={{ marginLeft: "-10px" }}>
+                              {`${document.verifiedBy?.firstName ?? ""} ${document.verifiedBy?.lastName ?? ""}`.trim() || "N/A"}
                             </small>
                           </span>
-                          <small className="ms-2">
-                            {formatUTCToLocalTime(document?.uploadedAt)}
-                          </small>
                         </div>
-                        {document?.verifiedAt && (
-                          <div className="d-flex align-items-center mt-1">
-                            <small className="text-secondary me-2">
-                              {document.isVerified ? "Approved by" : "Rejected by"}
-                            </small>
-                            <Avatar
-                              size="xs"
-                              classAvatar="m-0"
-                              firstName={document.verifiedBy?.firstName}
-                              lastName={document.verifiedBy?.lastName}
-                            />
-                            <span className="ms-1">
-                              <small className="fw-normal">
-                                {`${document.verifiedBy?.firstName ?? ""} ${document.verifiedBy?.lastName ?? ""}`.trim() || "N/A"}
-                              </small>
-                            </span>
-                            <small className="ms-2">
-                              {formatUTCToLocalTime(document?.verifiedAt)}
-                            </small>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-
-                    {/* Right Side: Status and Actions */}
-                    <div className="d-flex flex-column align-items-end" style={{ marginTop: "42px", marginRight: "-52px" }}>
-                      {document.isLatest && (
-                        <span className="badge bg-success-subtle text-success">
-                          latest
-                        </span>
                       )}
-
-                      <div className="d-flex align-items-center mt-1">
-                        {document?.updatedBy && (
-                          <>
-                            <small className="text-secondary me-2">Updated by</small>
-                            <Avatar
-                              size="xs"
-                              classAvatar="m-0"
-                              firstName={document.updatedBy?.firstName}
-                              lastName={document.updatedBy?.lastName}
-                            />
-                            <span className="ms-1">
-                              <small className="fw-normal">
-                                {`${document.updatedBy?.firstName ?? ""} ${document.updatedBy?.lastName ?? ""}`.trim() || "N/A"}
-                              </small>
-                            </span>
-                            <small className="ms-2">
-                              {formatUTCToLocalTime(document?.updatedAt)}
-                            </small>
-                          </>
-                        )}
-                      </div>
-                      <small className="text-secondary mt-1">
-                        version {document.version}
-                      </small>
+                      {/* Conditionally render verified date */}
+                      {document?.verifiedAt && (
+                        <small className="ms-2" style={{ marginRight: "-103px" }}>
+                          {formatUTCToLocalTime(document?.verifiedAt)}
+                        </small>
+                      )}
                     </div>
                   </div>
+                  <div className="d-flex flex-column align-items-end" style={{ marginTop: "-13px", marginRight: "46px" }}>
+                    <small className="badge rounded-pill bg-label-secondary mt-1" style={{ marginRight: "-336px" }}>
+                      version {document.version}
+                    </small>
+                    {document.isLatest && (
+                      <span className="badge bg-success-subtle text-success">
+                        latest
+                      </span>
+                    )}
+                  </div>
+                  {/* Right Side: Status and Actions */}
+                  <div className="d-flex flex-column align-items-end" style={{ marginTop: "16px", marginRight: "46px" }}>
+                    {/* <small className="badge rounded-pill bg-label-secondary mt-1" style={{ marginRight: "-105px" }}>
+                      version {document.version}
+                    </small> */}
+                    {document.isLatest && (
+                      <span className="badge bg-success-subtle text-success">
+                        latest
+                      </span>
+                    )}
+                    <div className="d-flex align-items-center mt-1">
+                      {document?.updatedBy && (
+                        <>
+                          <small className="text-secondary me-2 fw-semibold">Updated by</small>
+                          <Avatar
+                            size="xs"
+                            classAvatar="m-0"
+                            firstName={document.updatedBy?.firstName}
+                            lastName={document.updatedBy?.lastName}
+                          />
+                          <span className="ms-1" style={{ marginRight: "-37px" }}>
+                            <small className="fw-normal" style={{ marginLeft: "-10px" }}>
+                              {`${document.updatedBy?.firstName ?? ""} ${document.updatedBy?.lastName ?? ""}`.trim() || "N/A"}
+                            </small>
+                          </span>
+                        </>
+                      )}
+                    </div>
+                    {/* Conditionally render updated date */}
+                    {document?.updatedAt && (
+                      <small className="ms-2" style={{ marginRight: "-75px" }}>
+                        {formatUTCToLocalTime(document?.updatedAt)}
+                      </small>
+                    )}
+                    
+                  </div>
                 </div>
-              ))}
-            </div>
+              </div>
+            ))}
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 
diff --git a/src/components/Documents/ViewDocument.jsx b/src/components/Documents/ViewDocument.jsx
index 5eb46f37..8270bb08 100644
--- a/src/components/Documents/ViewDocument.jsx
+++ b/src/components/Documents/ViewDocument.jsx
@@ -1,3 +1,4 @@
+// ViewDocument.jsx
 import React, { useState } from "react";
 import {
   useDocumentDetails,
@@ -12,9 +13,6 @@ import {
   ITEMS_PER_PAGE,
   VERIFY_DOCUMENT,
 } from "../../utils/constants";
-import Pagination from "../common/Pagination";
-import VersionListSkeleton from "./VersionListSkeleton";
-// import DocumentDetailsSkeleton from "./DocumentDetailsSkeleton";
 import DocumentDetailsSkeleton from "./DocumentDetailsSkeleton ";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import DocumentVersionList from "./DocumentVersionList";
@@ -22,15 +20,20 @@ import DocumentVersionList from "./DocumentVersionList";
 const ViewDocument = () => {
   const { viewDoc, setOpenDocument } = useDocumentContext();
   const [currentPage, setCurrentPage] = useState(1);
+  const [showVersions, setShowVersions] = useState(false);
   const canVerifyDocument = useHasUserPermission(VERIFY_DOCUMENT);
+
+  // Document Details
   const { data, isLoading, isError, error } = useDocumentDetails(
     viewDoc?.document
   );
+
+  // Document Versions (fetch only if toggle is ON)
   const {
     data: versionList,
-    isLoading: versionLoding,
+    isLoading: versionLoading,
   } = useDocumentVersionList(
-    data?.parentAttachmentId,
+    showVersions ? data?.parentAttachmentId : null,
     ITEMS_PER_PAGE - 10,
     currentPage
   );
@@ -41,6 +44,7 @@ const ViewDocument = () => {
     }
   };
 
+  // Verify / Reject
   const { mutate: VerifyDoc, isPending } = useVerifyDocument();
   const VerifyDocument = () => {
     VerifyDoc({ documentId: viewDoc?.document, isVerify: true });
@@ -57,11 +61,12 @@ const ViewDocument = () => {
         <p className="danger-text">{error?.response?.status}</p>
       </div>
     );
-  console.log("kartik", data)
+
   return (
     <div className="p-3">
       <p className="fw-bold fs-5 mb-3 border-bottom pb-2">Document Details</p>
 
+      {/* Document Info Rows */}
       <div className="row mb-2 text-start">
         <div className="col-12 col-md-6 d-flex">
           <span className="fw-semibold me-2" style={{ minWidth: "140px" }}>
@@ -103,14 +108,7 @@ const ViewDocument = () => {
             {formatUTCToLocalTime(data.uploadedAt)}
           </span>
         </div>
-        <div className="col-12 col-md-6 d-flex">
-          <span className="fw-semibold me-2" style={{ minWidth: "140px" }}>
-            Updated At:
-          </span>
-          <span className="text-muted">
-            {formatUTCToLocalTime(data.updatedAt) || "-"}
-          </span>
-        </div>
+        
       </div>
 
       <div className="row mb-2 text-start">
@@ -144,39 +142,32 @@ const ViewDocument = () => {
         </div>
       </div>
 
-      {/* Verify / Reject */}
-      {data.isVerified === null && canVerifyDocument && (
-        <div className="d-flex justify-content-end mb-3">
-          {isPending ? (
-            <span className="text-muted">Please Wait...</span>
-          ) : (
-            <>
-              <button
-                type="button"
-                onClick={RejectDocument}
-                className="btn btn-sm btn-danger me-2"
-              >
-                Reject
-              </button>
-              <button
-                type="button"
-                onClick={VerifyDocument}
-                className="btn btn-sm btn-primary"
-              >
-                Verify
-              </button>
-            </>
-          )}
+      {/* Toggle for Versions */}
+      <div className="d-flex justify-content-between align-items-center mb-3">
+        <p className="m-0 fw-semibold fs-6">Documents:</p>
+        <div className="form-check form-switch">
+          <label className="form-check-label" htmlFor="showVersionsSwitch">
+            Show Versions
+          </label>
+          <input
+            className="form-check-input"
+            type="checkbox"
+            id="showVersionsSwitch"
+            checked={showVersions}
+            onChange={(e) => setShowVersions(e.target.checked)}
+          />
         </div>
-      )}
-
+      </div>
 
       <DocumentVersionList
-        versionLoding={versionLoding}
+        versionLoding={versionLoading}
         versionList={versionList}
         isPending={isPending}
         setOpenDocument={setOpenDocument}
         VerifyDocument={VerifyDocument}
+        RejectDocument={RejectDocument}
+        showVersions={showVersions}
+        latestDoc={data}
       />
     </div>
   );