diff --git a/src/components/DocumentPreviewButton.tsx b/src/components/DocumentPreviewButton.tsx
index 0d5f21b2..fe372ade 100644
--- a/src/components/DocumentPreviewButton.tsx
+++ b/src/components/DocumentPreviewButton.tsx
@@ -1,69 +1,88 @@
-import React, { useState } from "react";
+import React, { useState } from 'react';
+import ViewExternalDocumentsModal from '../pages/viewExternalDocuments';
 
 const DocumentSelector = ({ item }) => {
-    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
-    const toggleDropdown = () => {
-        setIsDropdownOpen(!isDropdownOpen);
-    };
-    const handleDocumentOnClick = (urls: string) => {
-        const url = `#/view-external-document?fileUrl=${encodeURIComponent(urls)}&backUrl=${encodeURIComponent("/")}&title=${encodeURIComponent("Documents Preview")}`;
-        window.open(url, "_blank");
-    };
-    return (
-        <div className="relative inline-block">
-            <button
-                className="bg-blue-500 text-white py-2 px-4 rounded-lg font-semibold hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                onClick={toggleDropdown}
-            >
-                Select Attachment
-            </button>
+  const toggleDropdown = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+  const handleDocumentOnClick = (urls: string) => {
+    const url = `#/view-external-document?fileUrl=${encodeURIComponent(
+      urls
+    )}&backUrl=${encodeURIComponent('/')}&title=${encodeURIComponent(
+      'Documents Preview'
+    )}`;
+    window.open(url, '_blank');
+  };
+  const [show, setShow] = useState(false);
+  const [fileUrl, setFileUrl] = useState('');
+  const viewExternalDocumentsModal = (url: any) => {
+    setFileUrl(url);
+    setShow(true);
+  };
+  const onClose = () => {
+    setShow(false);
+  };
+  return (
+    <div className="relative inline-block">
+      <button
+        className="bg-blue-500 text-white py-2 px-4 rounded-lg font-semibold hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        onClick={toggleDropdown}
+      >
+        Select Attachment
+      </button>
 
-            {isDropdownOpen && (
-                <ul className="dark:text-white dark:bg-dark-tertiary absolute mt-2 border border-gray-300 rounded-lg shadow-lg w-48 z-50">
-                    {item?.idDocumentUrl && (
-                        <li>
-                            <button
-                                className="w-full text-left px-4 py-2 text-white hover:bg-gray-100 hover:text-blue-500 focus:outline-none"
-                                onClick={() => {
-                                    handleDocumentOnClick(item.idDocumentUrl);
-                                    setIsDropdownOpen(false);
-                                }}
-                            >
-                                ID Card
-                            </button>
-                        </li>
-                    )}
-                    {item?.resumeUrl && (
-                        <li>
-                            <button
-                                className="w-full text-left px-4 py-2 text-white hover:bg-gray-100 hover:text-blue-500 focus:outline-none"
-                                onClick={() => {
-                                    handleDocumentOnClick(item.resumeUrl);
-                                    setIsDropdownOpen(false);
-                                }}
-                            >
-                                Resume
-                            </button>
-                        </li>
-                    )}
-                    {item?.coverLetterUrl && (
-                        <li>
-                            <button
-                                className="w-full text-left px-4 py-2 text-white hover:bg-gray-100 hover:text-blue-500 focus:outline-none"
-                                onClick={() => {
-                                    handleDocumentOnClick(item.coverLetterUrl);
-                                    setIsDropdownOpen(false);
-                                }}
-                            >
-                                Cover Letter
-                            </button>
-                        </li>
-                    )}
-                </ul>
-            )}
-        </div>
-    );
+      {isDropdownOpen && (
+        <ul className="dark:text-white dark:bg-dark-tertiary absolute mt-2 border border-gray-300 rounded-lg shadow-lg w-48 z-50">
+          {item?.idDocumentUrl && (
+            <li>
+              <button
+                className="w-full text-left px-4 py-2 text-white hover:bg-gray-100 hover:text-blue-500 focus:outline-none"
+                onClick={() => {
+                  viewExternalDocumentsModal(item.idDocumentUrl);
+                  setIsDropdownOpen(false);
+                }}
+              >
+                ID Card
+              </button>
+            </li>
+          )}
+          {item?.resumeUrl && (
+            <li>
+              <button
+                className="w-full text-left px-4 py-2 text-white hover:bg-gray-100 hover:text-blue-500 focus:outline-none"
+                onClick={() => {
+                  viewExternalDocumentsModal(item.resumeUrl);
+                  setIsDropdownOpen(false);
+                }}
+              >
+                Resume
+              </button>
+            </li>
+          )}
+          {item?.coverLetterUrl && (
+            <li>
+              <button
+                className="w-full text-left px-4 py-2 text-white hover:bg-gray-100 hover:text-blue-500 focus:outline-none"
+                onClick={() => {
+                  viewExternalDocumentsModal(item.coverLetterUrl);
+                  setIsDropdownOpen(false);
+                }}
+              >
+                Cover Letter
+              </button>
+            </li>
+          )}
+        </ul>
+      )}
+      <ViewExternalDocumentsModal
+        show={show}
+        onClose={onClose}
+        fileUrl={fileUrl}
+      />
+    </div>
+  );
 };
 
-export default DocumentSelector;
\ No newline at end of file
+export default DocumentSelector;
diff --git a/src/pages/ApplicationCycle/myApplication.tsx b/src/pages/ApplicationCycle/myApplication.tsx
index 4cde7d53..6f3c90a3 100644
--- a/src/pages/ApplicationCycle/myApplication.tsx
+++ b/src/pages/ApplicationCycle/myApplication.tsx
@@ -1,324 +1,478 @@
-import { useEffect, useState } from "react";
-import { useAppDispatch, useAppSelector } from "../../hooks/hooks";
-import { toast, ToastContainer } from "react-toastify";
-import { AiFillFilePdf } from "react-icons/ai"
+import { useEffect, useState } from 'react';
+import { useAppDispatch, useAppSelector } from '../../hooks/hooks';
+import { toast, ToastContainer } from 'react-toastify';
+import { AiFillFilePdf } from 'react-icons/ai';
 
 import {
-    getApplicantCyclesApplications,
-    getCyclesApplicationAttributes,
-    getCyclesStages
-} from "../../redux/actions/applications";
-import { Link } from "react-router-dom";
+  getApplicantCyclesApplications,
+  getCyclesApplicationAttributes,
+  getCyclesStages,
+} from '../../redux/actions/applications';
+import { Link } from 'react-router-dom';
+import ViewExternalDocumentsModal from '../../pages/viewExternalDocuments';
 
 export const MyApplication = () => {
-    const dispatch = useAppDispatch();
-    const [isLoading, setIsLoading] = useState(true);
-    const [application, setApplication] = useState<any>(null);
-    const [attributes, setAttributes] = useState<any>(null);
-    const [stages, setStages] = useState<any>(null);
-
-    useEffect(() => {
-        const fetchApplications = async () => {
-            try {
-                const response = await getApplicantCyclesApplications();
-                if (response?.data?.getTraineeCyclesApplications) {
-                    setApplication(response.data.getTraineeCyclesApplications);
-                    console.log("Appl", response.data.getTraineeCyclesApplications)
-                } else {
-                    throw new Error("No applications found");
-                }
-            } catch (error) {
-                toast.error("No applications found!");
-            } finally {
-                setIsLoading(false);
-            }
-        };
-
-        if (!application) {
-            fetchApplications();
+  const dispatch = useAppDispatch();
+  const [isLoading, setIsLoading] = useState(true);
+  const [application, setApplication] = useState<any>(null);
+  const [attributes, setAttributes] = useState<any>(null);
+  const [stages, setStages] = useState<any>(null);
+  const [show, setShow] = useState(false);
+  const [fileUrl, setFileUrl] = useState('');
+  const viewExternalDocumentsModal = (url: any) => {
+    setFileUrl(url);
+    setShow(true);
+  };
+  const onClose = () => {
+    setShow(false);
+  };
+  useEffect(() => {
+    const fetchApplications = async () => {
+      try {
+        const response = await getApplicantCyclesApplications();
+        if (response?.data?.getTraineeCyclesApplications) {
+          setApplication(response.data.getTraineeCyclesApplications);
+          console.log('Appl', response.data.getTraineeCyclesApplications);
         } else {
-            const fetchAttributesAndStages = async () => {
-                try {
-                    setIsLoading(true);
-                    if (application?._id) {
-                        const attributesResponse = await getCyclesApplicationAttributes(application._id);
-                        if (attributesResponse?.data?.getApplicationsAttributes) {
-                            setAttributes(attributesResponse.data.getApplicationsAttributes);
-                        }
-                        const stagesResponse = await getCyclesStages(application._id);
-                        if (stagesResponse?.data?.getApplicationStages) {
-                            console.log(stagesResponse.data.getApplicationStages);
-                            setStages(stagesResponse.data.getApplicationStages);
-                        }
-                    }
-                } catch (error) {
-                    toast.error("Something went wrong while fetching details!");
-                } finally {
-                    setIsLoading(false);
-                }
-            };
+          throw new Error('No applications found');
+        }
+      } catch (error) {
+        toast.error('No applications found!');
+      } finally {
+        setIsLoading(false);
+      }
+    };
 
-            fetchAttributesAndStages();
+    if (!application) {
+      fetchApplications();
+    } else {
+      const fetchAttributesAndStages = async () => {
+        try {
+          setIsLoading(true);
+          if (application?._id) {
+            const attributesResponse = await getCyclesApplicationAttributes(
+              application._id
+            );
+            if (attributesResponse?.data?.getApplicationsAttributes) {
+              setAttributes(attributesResponse.data.getApplicationsAttributes);
+            }
+            const stagesResponse = await getCyclesStages(application._id);
+            if (stagesResponse?.data?.getApplicationStages) {
+              console.log(stagesResponse.data.getApplicationStages);
+              setStages(stagesResponse.data.getApplicationStages);
+            }
+          }
+        } catch (error) {
+          toast.error('Something went wrong while fetching details!');
+        } finally {
+          setIsLoading(false);
         }
-    }, [application]);
+      };
 
-    const formatDate = (timestamp) => {
-        const date = new Date(Number(timestamp));
-        console.log("DDD", date)
-        if (isNaN(date.getTime())) return '';
+      fetchAttributesAndStages();
+    }
+  }, [application]);
 
-        return new Intl.DateTimeFormat('en-US', {
-            day: '2-digit',
-            month: 'short',
-            year: 'numeric',
-        }).format(date);
-    };
+  const formatDate = (timestamp) => {
+    const date = new Date(Number(timestamp));
+    console.log('DDD', date);
+    if (isNaN(date.getTime())) return '';
 
-    if (isLoading) {
-        return (
-            <>
-                <div className="animate-pulse space-y-4 p-6 bg-gray-100 dark:bg-[#1E293B] min-h-screen min-w-screen"
-                    style={{ width: "70%" }}>
-                    <div className="h-10 w-2/3 bg-gray-300 dark:bg-gray-700 rounded"></div>
-                    <div className="space-y-2">
-                        <div className="h-6 w-1/2 bg-gray-300 dark:bg-gray-700 rounded"></div>
-                        <div className="h-6 w-1/3 bg-gray-300 dark:bg-gray-700 rounded"></div>
-                        <div className="h-6 w-3/4 bg-gray-300 dark:bg-gray-700 rounded"></div>
-                    </div>
-                </div>
-                <div className="animate-pulse space-y-4 p-6 bg-gray-100 dark:bg-[#1E293B] min-h-screen min-w-screen"
-                    style={{ width: "70%" }}>
-                    <div className="h-10 w-2/3 bg-gray-300 dark:bg-gray-700 rounded"></div>
-                    <div className="space-y-2">
-                        <div className="h-6 w-1/2 bg-gray-300 dark:bg-gray-700 rounded"></div>
-                        <div className="h-6 w-1/3 bg-gray-300 dark:bg-gray-700 rounded"></div>
-                        <div className="h-6 w-3/4 bg-gray-300 dark:bg-gray-700 rounded"></div>
-                    </div>
-                </div>
-            </>
-        );
-    }
+    return new Intl.DateTimeFormat('en-US', {
+      day: '2-digit',
+      month: 'short',
+      year: 'numeric',
+    }).format(date);
+  };
 
-    if (!application) {
-        return (
-            <div className="flex items-center justify-center min-h-screen w-full bg-gray-100 dark:bg-[#1E293B]">
-                <div className="space-y-4 p-6 bg-gray-200 dark:bg-gray-800 rounded-md shadow-lg">
-                    <div className="h-10 w-full flex items-center justify-center rounded-md">
-                        <p className="text-red-500 dark:text-red-400 text-lg font-semibold">
-                            No applications found
-                        </p>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-    console.log("APPJJA", application)
+  if (isLoading) {
+    return (
+      <>
+        <div
+          className="animate-pulse space-y-4 p-6 bg-gray-100 dark:bg-[#1E293B] min-h-screen min-w-screen"
+          style={{ width: '70%' }}
+        >
+          <div className="h-10 w-2/3 bg-gray-300 dark:bg-gray-700 rounded"></div>
+          <div className="space-y-2">
+            <div className="h-6 w-1/2 bg-gray-300 dark:bg-gray-700 rounded"></div>
+            <div className="h-6 w-1/3 bg-gray-300 dark:bg-gray-700 rounded"></div>
+            <div className="h-6 w-3/4 bg-gray-300 dark:bg-gray-700 rounded"></div>
+          </div>
+        </div>
+        <div
+          className="animate-pulse space-y-4 p-6 bg-gray-100 dark:bg-[#1E293B] min-h-screen min-w-screen"
+          style={{ width: '70%' }}
+        >
+          <div className="h-10 w-2/3 bg-gray-300 dark:bg-gray-700 rounded"></div>
+          <div className="space-y-2">
+            <div className="h-6 w-1/2 bg-gray-300 dark:bg-gray-700 rounded"></div>
+            <div className="h-6 w-1/3 bg-gray-300 dark:bg-gray-700 rounded"></div>
+            <div className="h-6 w-3/4 bg-gray-300 dark:bg-gray-700 rounded"></div>
+          </div>
+        </div>
+      </>
+    );
+  }
 
+  if (!application) {
     return (
-        <>
-            <ToastContainer />
-            <div className="py-8 px-6 min-h-screen min-w-screen bg-gray-100 dark:bg-[#1E293B] text-gray-900 dark:text-white" style={{ width: "70%" }}>
-                <h2 className="pl-5 text-3xl font-extrabold text-primary dark:text-[#56C870] sm:text-4xl mb-6">
-                    My Application
-                </h2>
-                <div className="dark:bg-[#1F2A37] p-6 mt-5 rounded-lg shadow-lg">
-                    <div className="flex flex-col sm:flex-row border-b border-gray-300 dark:border-gray-600 pb-4">
-                        <div className="flex-1 pr-4 mb-4 sm:mb-0">
-                            <h3 className="text-lg font-semibold mb-2 text-green-700 dark:text-[#56C870]">
-                                Personal Information
-                            </h3>
-                            <ul className="list-disc list-inside space-y-2 text-gray-800 dark:text-gray-300">
-                                {application?.firstName && <li><strong>Firstname:</strong> {application.firstName}</li>}
-                                {application?.lastName && <li><strong>Lastname:</strong> {application.lastName}</li>}
-                                {application?.email && <li><strong>Email:</strong> {application.email}</li>}
-                                {application?.cycle_id?.name && <li><strong>Application Cycle:</strong> {application.cycle_id.name}</li>}
-                                {application?.cycle_id?.createdAt && (
-                                    <li><strong>Published date:</strong> {formatDate(application.cycle_id.createdAt)}</li>
-                                )}
-                                {application?.createdAt && (
-                                    <li><strong>Application date:</strong> {formatDate(application.createdAt)}</li>
-                                )}
-                            </ul>
-                        </div>
-                        <div className="flex-1 pl-4">
-                            {attributes?.Address && (
-                                <h3 className="text-lg font-semibold mb-2 text-green-700 dark:text-[#56C870]">
-                                    Address
-                                </h3>)}
-                            <ul className="list-disc list-inside space-y-2 text-gray-800 dark:text-gray-300">
-                                {attributes?.province && <li><strong>Province:</strong> {attributes.province}</li>}
-                                {attributes?.district && <li><strong>District:</strong> {attributes.district}</li>}
-                                {attributes?.sector && <li><strong>Sector:</strong> {attributes.sector}</li>}
-                                {attributes?.Address && <li><strong>Address:</strong> {attributes.Address}</li>}
-                            </ul>
-                        </div>
-                    </div>
-                    {(application?.coverLetterUrl || application?.resumeUrl || application?.idDocumentUrl) && (
-                        <div className="mb-6 p-4 border border-gray-300 rounded-lg bg-gray-100 dark:bg-gray-800 dark:border-gray-700">
-                            <h3 className="mb-4 text-lg font-semibold text-green-700 dark:text-[#56C870]">
-                                Supporting Documents
-                            </h3>
-                            <ul className="flex flex-col gap-4">
-                                {application?.idDocumentUrl && (
-                                    <li className="flex flex-col">
-                                        <strong className="text-gray-700 dark:text-gray-200">
-                                            ID Card
-                                        </strong>
-                                        <Link
-                                            to={`/view-external-document?fileUrl=${encodeURIComponent(application.idDocumentUrl)}&backUrl=${encodeURIComponent("/")}&title=${encodeURIComponent("ID Document")}`}
-                                            target="_blank"
-                                            className="flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:underline mt-1"
-                                        >
-                                            <AiFillFilePdf size={20} className="text-red-600" />
-                                            <span>View ID Card</span>
-                                        </Link>
-                                    </li>
-                                )}
-                                {application?.resumeUrl && (
-                                    <li className="flex flex-col">
-                                        <strong className="text-gray-700 dark:text-gray-200">
-                                            Resume
-                                        </strong>
-                                        <Link
-                                            to={`/view-external-document?fileUrl=${encodeURIComponent(application.resumeUrl)}&backUrl=${encodeURIComponent("/")}&title=${encodeURIComponent("Resume Document")}`}
-                                            target="_blank"
-                                            className="flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:underline mt-1"
-                                        >
-                                            <AiFillFilePdf size={20} className="text-red-600" />
-                                            <span>View Resume</span>
-                                        </Link>
-                                    </li>
-                                )}
-                                {application?.coverLetterUrl && (
-                                    <li className="flex flex-col">
-                                        <strong className="text-gray-700 dark:text-gray-200">
-                                            Cover Letter
-                                        </strong>
-                                        <Link
-                                            to={`/view-external-document?fileUrl=${encodeURIComponent(application.coverLetterUrl)}&backUrl=${encodeURIComponent("/")}&title=${encodeURIComponent("Cover letter Document")}`}
-                                            target="_blank"
-                                            className="flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:underline mt-1"
-                                        >
-                                            <AiFillFilePdf size={20} className="text-red-600" />
-                                            <span>View Cover Letter</span>
-                                        </Link>
-                                    </li>
-                                )}
-                            </ul>
-                        </div>
-                    )}
-                    <section>
-                        <h3 className="text-2xl font-bold text-primary dark:text-[#56C870] mb-4">Application Stages</h3>
-                        <p className="mb-3">
-                            <strong>Current Stage:</strong>
-                            {application?.applicationPhase === "Rejected" ? (
-                                <span className="text-red-500"> Rejected</span>
-                            ) : (
-                                <span className="text-green-500"> {application?.applicationPhase}</span>
-                            )}
-                        </p>
+      <div className="flex items-center justify-center min-h-screen w-full bg-gray-100 dark:bg-[#1E293B]">
+        <div className="space-y-4 p-6 bg-gray-200 dark:bg-gray-800 rounded-md shadow-lg">
+          <div className="h-10 w-full flex items-center justify-center rounded-md">
+            <p className="text-red-500 dark:text-red-400 text-lg font-semibold">
+              No applications found
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  console.log('APPJJA', application);
 
-                        <div className="bg-gray-100 dark:bg-[#262E3D] p-4 rounded-lg mt-4 shadow">
-                            <h4 className="text-xl font-semibold mb-3">Stages History</h4>
-                            {!stages?.dismissed && !stages?.interview && !stages?.shortlist && (
-                                <p className="text-red-500">
-                                    No stages history found
-                                </p>
-                            )}
-                            <ul className="space-y-6 list-disc list-inside marker:text-[#56C870] dark:marker:text-green-400 bg-red">
-                                {stages?.dismissed && (
-                                    <li className="bg-red-500 text-white p-6 rounded-lg shadow-md">
-                                        <strong className="font-semibold text-xl mb-3">Rejected</strong>
+  return (
+    <>
+      <ToastContainer />
+      <div
+        className="py-8 px-6 min-h-screen min-w-screen bg-gray-100 dark:bg-[#1E293B] text-gray-900 dark:text-white"
+        style={{ width: '70%' }}
+      >
+        <h2 className="pl-5 text-3xl font-extrabold text-primary dark:text-[#56C870] sm:text-4xl mb-6">
+          My Application
+        </h2>
+        <div className="dark:bg-[#1F2A37] p-6 mt-5 rounded-lg shadow-lg">
+          <div className="flex flex-col sm:flex-row border-b border-gray-300 dark:border-gray-600 pb-4">
+            <div className="flex-1 pr-4 mb-4 sm:mb-0">
+              <h3 className="text-lg font-semibold mb-2 text-green-700 dark:text-[#56C870]">
+                Personal Information
+              </h3>
+              <ul className="list-disc list-inside space-y-2 text-gray-800 dark:text-gray-300">
+                {application?.firstName && (
+                  <li>
+                    <strong>Firstname:</strong> {application.firstName}
+                  </li>
+                )}
+                {application?.lastName && (
+                  <li>
+                    <strong>Lastname:</strong> {application.lastName}
+                  </li>
+                )}
+                {application?.email && (
+                  <li>
+                    <strong>Email:</strong> {application.email}
+                  </li>
+                )}
+                {application?.cycle_id?.name && (
+                  <li>
+                    <strong>Application Cycle:</strong>{' '}
+                    {application.cycle_id.name}
+                  </li>
+                )}
+                {application?.cycle_id?.createdAt && (
+                  <li>
+                    <strong>Published date:</strong>{' '}
+                    {formatDate(application.cycle_id.createdAt)}
+                  </li>
+                )}
+                {application?.createdAt && (
+                  <li>
+                    <strong>Application date:</strong>{' '}
+                    {formatDate(application.createdAt)}
+                  </li>
+                )}
+              </ul>
+            </div>
+            <div className="flex-1 pl-4">
+              {attributes?.Address && (
+                <h3 className="text-lg font-semibold mb-2 text-green-700 dark:text-[#56C870]">
+                  Address
+                </h3>
+              )}
+              <ul className="list-disc list-inside space-y-2 text-gray-800 dark:text-gray-300">
+                {attributes?.province && (
+                  <li>
+                    <strong>Province:</strong> {attributes.province}
+                  </li>
+                )}
+                {attributes?.district && (
+                  <li>
+                    <strong>District:</strong> {attributes.district}
+                  </li>
+                )}
+                {attributes?.sector && (
+                  <li>
+                    <strong>Sector:</strong> {attributes.sector}
+                  </li>
+                )}
+                {attributes?.Address && (
+                  <li>
+                    <strong>Address:</strong> {attributes.Address}
+                  </li>
+                )}
+              </ul>
+            </div>
+          </div>
+          {(application?.coverLetterUrl ||
+            application?.resumeUrl ||
+            application?.idDocumentUrl) && (
+            <div className="mb-6 p-4 border border-gray-300 rounded-lg bg-gray-100 dark:bg-gray-800 dark:border-gray-700">
+              <h3 className="mb-4 text-lg font-semibold text-green-700 dark:text-[#56C870]">
+                Supporting Documents
+              </h3>
+              <ul className="flex flex-col gap-4">
+                {application?.idDocumentUrl && (
+                  <li className="flex flex-col">
+                    <strong className="text-gray-700 dark:text-gray-200">
+                      ID Card
+                    </strong>
+                    <button
+                      onClick={() =>
+                        viewExternalDocumentsModal(application.idDocumentUrl)
+                      }
+                      className="flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:underline mt-1"
+                    >
+                      <AiFillFilePdf size={20} className="text-red-600" />
+                      <span>View ID Card</span>
+                    </button>
+                  </li>
+                )}
+                {application?.resumeUrl && (
+                  <li className="flex flex-col">
+                    <strong className="text-gray-700 dark:text-gray-200">
+                      Resume
+                    </strong>
+                    <button
+                      onClick={() =>
+                        viewExternalDocumentsModal(application.resumeUrl)
+                      }
+                      className="flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:underline mt-1"
+                    >
+                      <AiFillFilePdf size={20} className="text-red-600" />
+                      <span>View Resume</span>
+                    </button>
+                  </li>
+                )}
+                {application?.coverLetterUrl && (
+                  <li className="flex flex-col">
+                    <strong className="text-gray-700 dark:text-gray-200">
+                      Cover Letter
+                    </strong>
+                    <button
+                      onClick={() =>
+                        viewExternalDocumentsModal(application.coverLetterUrl)
+                      }
+                      className="flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:underline mt-1"
+                    >
+                      <AiFillFilePdf size={20} className="text-red-600" />
+                      <span>View Cover letter</span>
+                    </button>
+                  </li>
+                )}
+              </ul>
+            </div>
+          )}
+          <section>
+            <h3 className="text-2xl font-bold text-primary dark:text-[#56C870] mb-4">
+              Application Stages
+            </h3>
+            <p className="mb-3">
+              <strong>Current Stage:</strong>
+              {application?.applicationPhase === 'Rejected' ? (
+                <span className="text-red-500"> Rejected</span>
+              ) : (
+                <span className="text-green-500">
+                  {' '}
+                  {application?.applicationPhase}
+                </span>
+              )}
+            </p>
 
-                                        {stages.dismissed?.status && (
-                                            <p><strong>Status:</strong> {stages.dismissed.status}</p>
-                                        )}
+            <div className="bg-gray-100 dark:bg-[#262E3D] p-4 rounded-lg mt-4 shadow">
+              <h4 className="text-xl font-semibold mb-3">Stages History</h4>
+              {!stages?.dismissed &&
+                !stages?.interview &&
+                !stages?.shortlist && (
+                  <p className="text-red-500">No stages history found</p>
+                )}
+              <ul className="space-y-6 list-disc list-inside marker:text-[#56C870] dark:marker:text-green-400 bg-red">
+                {stages?.dismissed && (
+                  <li className="bg-red-500 text-white p-6 rounded-lg shadow-md">
+                    <strong className="font-semibold text-xl mb-3">
+                      Rejected
+                    </strong>
 
-                                        {stages.dismissed?.stageDismissedFrom && (
-                                            <p><strong>Stage dismissed from:</strong> {stages.dismissed.stageDismissedFrom}</p>
-                                        )}
+                    {stages.dismissed?.status && (
+                      <p>
+                        <strong>Status:</strong> {stages.dismissed.status}
+                      </p>
+                    )}
 
-                                        {stages.dismissed?.comments && (
-                                            <p><strong>Comments:</strong> {stages.dismissed.comments}</p>
-                                        )}
+                    {stages.dismissed?.stageDismissedFrom && (
+                      <p>
+                        <strong>Stage dismissed from:</strong>{' '}
+                        {stages.dismissed.stageDismissedFrom}
+                      </p>
+                    )}
 
-                                        {stages.dismissed?.createdAt && (
-                                            <p><strong>Date:</strong> {formatDate(stages.dismissed.createdAt)}</p>
-                                        )}
-                                    </li>
-                                )}
+                    {stages.dismissed?.comments && (
+                      <p>
+                        <strong>Comments:</strong> {stages.dismissed.comments}
+                      </p>
+                    )}
 
-                                {stages?.admitted && (
-                                    <li className="">
-                                        <strong>Admitted</strong>
-                                        {stages?.allStages?.history
-                                            .filter((history: any) => history.stage === "Admitted")
-                                            .map((history: any, index: any) => (
-                                                <strong key={index}>
-                                                    &nbsp; ({formatDate(history.enteredAt)} - {formatDate(history.exitedAt)})
-                                                </strong>
-                                            ))}
-                                        {stages.admitted?.status && <p><b>Status:</b> {stages.admitted.status}</p>}
-                                        {stages.admitted?.stageDismissedFrom && <p><b>Score:</b> {stages.admitted.stageDismissedFrom}</p>}
-                                        {stages.admitted?.comments && <p><b>Comments:</b> {stages.admitted.comments}</p>}
-                                        {stages.admitted?.createdAt && <p><b>Date:</b> {formatDate(stages.admitted.createdAt)}</p>}
-                                    </li>
-                                )}
-                                {stages?.interview && (
-                                    <li>
-                                        <strong>Interview Assessment</strong>
-                                        {stages?.allStages?.history
-                                            .filter((history: any) => history.stage === "Technical Assessment")
-                                            .map((history: any, index: any) => (
-                                                <strong key={index}>
-                                                    &nbsp; ({formatDate(history.enteredAt)} - {formatDate(history.exitedAt)})
-                                                </strong>
-                                            ))}
-                                        {stages.interview?.interviewScore && <p><b>Score:</b> {stages.interview.interviewScore}</p>}
-                                        {stages.interview?.status && <p><b>Status:</b> {stages.interview.status}</p>}
-                                        {stages.interview?.comments && <p><b>Comments:</b> {stages.interview.comments}</p>}
-                                        {stages.interview?.createdAt && <p><b>Date:</b> {formatDate(stages.interview.createdAt)}</p>}
-                                    </li>
-                                )}
-                                {stages?.technical && (
-                                    <li>
-                                        <strong>Technical Assessment</strong>
-                                        {stages?.allStages?.history
-                                            .filter((history: any) => history.stage === "Technical Assessment")
-                                            .map((history: any, index: any) => (
-                                                <strong key={index}>
-                                                    &nbsp; ({formatDate(history.enteredAt)} - {formatDate(history.exitedAt)})
-                                                </strong>
-                                            ))}
-                                        {stages.technical?.score && <p><b>Score:</b> {stages.technical.score}%</p>}
-                                        {stages.technical?.status && <p><b>Status:</b> {stages.technical.status}</p>}
-                                        {stages.technical?.comments && <p><b>Comments:</b> {stages.technical.comments}</p>}
-                                        {stages.technical?.createdAt && <p><b>Date:</b> {formatDate(stages.technical.createdAt)}</p>}
-                                    </li>
-                                )}
-                                {stages?.shortlist && (
-                                    <li>
-                                        <strong>Shortlist</strong>
-                                        {stages?.allStages?.history
-                                            .filter((history: any) => history.stage === "Shortlisted")
-                                            .map((history: any, index: any) => (
-                                                <strong key={index}>
-                                                    &nbsp; ({formatDate(history.enteredAt)} - {formatDate(history.exitedAt)})
-                                                </strong>
-                                            ))}
-                                        {stages.shortlist?.status && <p><b>Status:</b> {stages.shortlist.status}</p>}
-                                        {stages.shortlist?.comments && <p><b>Comments:</b> {stages.shortlist.comments}</p>}
-                                        {stages.shortlist?.createdAt && <p><b>Date:</b> {formatDate(stages.shortlist.createdAt)}</p>}
-                                    </li>
-                                )}
+                    {stages.dismissed?.createdAt && (
+                      <p>
+                        <strong>Date:</strong>{' '}
+                        {formatDate(stages.dismissed.createdAt)}
+                      </p>
+                    )}
+                  </li>
+                )}
 
-                            </ul>
-                        </div>
-                    </section>
-                </div>
+                {stages?.admitted && (
+                  <li className="">
+                    <strong>Admitted</strong>
+                    {stages?.allStages?.history
+                      .filter((history: any) => history.stage === 'Admitted')
+                      .map((history: any, index: any) => (
+                        <strong key={index}>
+                          &nbsp; ({formatDate(history.enteredAt)} -{' '}
+                          {formatDate(history.exitedAt)})
+                        </strong>
+                      ))}
+                    {stages.admitted?.status && (
+                      <p>
+                        <b>Status:</b> {stages.admitted.status}
+                      </p>
+                    )}
+                    {stages.admitted?.stageDismissedFrom && (
+                      <p>
+                        <b>Score:</b> {stages.admitted.stageDismissedFrom}
+                      </p>
+                    )}
+                    {stages.admitted?.comments && (
+                      <p>
+                        <b>Comments:</b> {stages.admitted.comments}
+                      </p>
+                    )}
+                    {stages.admitted?.createdAt && (
+                      <p>
+                        <b>Date:</b> {formatDate(stages.admitted.createdAt)}
+                      </p>
+                    )}
+                  </li>
+                )}
+                {stages?.interview && (
+                  <li>
+                    <strong>Interview Assessment</strong>
+                    {stages?.allStages?.history
+                      .filter(
+                        (history: any) =>
+                          history.stage === 'Technical Assessment'
+                      )
+                      .map((history: any, index: any) => (
+                        <strong key={index}>
+                          &nbsp; ({formatDate(history.enteredAt)} -{' '}
+                          {formatDate(history.exitedAt)})
+                        </strong>
+                      ))}
+                    {stages.interview?.interviewScore && (
+                      <p>
+                        <b>Score:</b> {stages.interview.interviewScore}
+                      </p>
+                    )}
+                    {stages.interview?.status && (
+                      <p>
+                        <b>Status:</b> {stages.interview.status}
+                      </p>
+                    )}
+                    {stages.interview?.comments && (
+                      <p>
+                        <b>Comments:</b> {stages.interview.comments}
+                      </p>
+                    )}
+                    {stages.interview?.createdAt && (
+                      <p>
+                        <b>Date:</b> {formatDate(stages.interview.createdAt)}
+                      </p>
+                    )}
+                  </li>
+                )}
+                {stages?.technical && (
+                  <li>
+                    <strong>Technical Assessment</strong>
+                    {stages?.allStages?.history
+                      .filter(
+                        (history: any) =>
+                          history.stage === 'Technical Assessment'
+                      )
+                      .map((history: any, index: any) => (
+                        <strong key={index}>
+                          &nbsp; ({formatDate(history.enteredAt)} -{' '}
+                          {formatDate(history.exitedAt)})
+                        </strong>
+                      ))}
+                    {stages.technical?.score && (
+                      <p>
+                        <b>Score:</b> {stages.technical.score}%
+                      </p>
+                    )}
+                    {stages.technical?.status && (
+                      <p>
+                        <b>Status:</b> {stages.technical.status}
+                      </p>
+                    )}
+                    {stages.technical?.comments && (
+                      <p>
+                        <b>Comments:</b> {stages.technical.comments}
+                      </p>
+                    )}
+                    {stages.technical?.createdAt && (
+                      <p>
+                        <b>Date:</b> {formatDate(stages.technical.createdAt)}
+                      </p>
+                    )}
+                  </li>
+                )}
+                {stages?.shortlist && (
+                  <li>
+                    <strong>Shortlist</strong>
+                    {stages?.allStages?.history
+                      .filter((history: any) => history.stage === 'Shortlisted')
+                      .map((history: any, index: any) => (
+                        <strong key={index}>
+                          &nbsp; ({formatDate(history.enteredAt)} -{' '}
+                          {formatDate(history.exitedAt)})
+                        </strong>
+                      ))}
+                    {stages.shortlist?.status && (
+                      <p>
+                        <b>Status:</b> {stages.shortlist.status}
+                      </p>
+                    )}
+                    {stages.shortlist?.comments && (
+                      <p>
+                        <b>Comments:</b> {stages.shortlist.comments}
+                      </p>
+                    )}
+                    {stages.shortlist?.createdAt && (
+                      <p>
+                        <b>Date:</b> {formatDate(stages.shortlist.createdAt)}
+                      </p>
+                    )}
+                  </li>
+                )}
+              </ul>
             </div>
-        </>
-    );
+          </section>
+          <ViewExternalDocumentsModal
+            show={show}
+            onClose={onClose}
+            fileUrl={fileUrl}
+          />
+        </div>
+      </div>
+    </>
+  );
 };
 
-export default MyApplication;
\ No newline at end of file
+export default MyApplication;
diff --git a/src/pages/viewExternalDocuments.tsx b/src/pages/viewExternalDocuments.tsx
index 190ffac8..8099c02d 100644
--- a/src/pages/viewExternalDocuments.tsx
+++ b/src/pages/viewExternalDocuments.tsx
@@ -1,70 +1,126 @@
-import React from 'react'
-import { useLocation, Link } from 'react-router-dom'
-import { MdClose } from "react-icons/md";
-import { MdErrorOutline } from 'react-icons/md'
+import { MdClose, MdErrorOutline } from 'react-icons/md';
+import PropTypes from 'prop-types';
+import { useState, useEffect } from 'react';
 
-const ViewExternalDocuments = () => {
-    const { search } = useLocation()
-    const queryParams = new URLSearchParams(search)
-    const fileUrl = queryParams.get('fileUrl')
-    const backUrl = queryParams.get('backUrl')
-    const title = queryParams.get('title')
+const ViewExternalDocumentsModal = ({ show, onClose, fileUrl }) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [loadError, setLoadError] = useState(false);
 
-    const hasMissingParams = !fileUrl || !backUrl || !title
+  const isImage = ['.jpg', '.jpeg', '.png', '.gif', '.bmp'].some((ext) =>
+    fileUrl?.endsWith(ext)
+  );
+  const isPdf = fileUrl?.endsWith('.pdf');
 
-    const isPdf = fileUrl?.endsWith('.pdf')
-    const isImage = ['.jpg', '.jpeg', '.png', '.gif', '.bmp'].some((ext) => fileUrl?.endsWith(ext))
+  useEffect(() => {
+    if (fileUrl) {
+      setIsLoading(true);
+      setLoadError(false);
 
-    const handleCloseTab = () => {
-        window.close();
-    };
+      if (isImage) {
+        const img = new Image();
+        img.onload = () => setIsLoading(false);
+        img.onerror = () => {
+          setIsLoading(false);
+          setLoadError(true);
+        };
+        img.src = fileUrl;
+      } else if (isPdf) {
+        const xhr = new XMLHttpRequest();
+        xhr.open('HEAD', fileUrl, true);
+        xhr.onload = () => {
+          if (xhr.status === 200) {
+            setIsLoading(false);
+          } else {
+            setIsLoading(false);
+            setLoadError(true);
+          }
+        };
+        xhr.onerror = () => {
+          setIsLoading(false);
+          setLoadError(true);
+        };
+        xhr.send();
+      } else {
+        setIsLoading(false);
+        setLoadError(true);
+      }
+    }
+  }, [fileUrl, isImage, isPdf]);
 
-    return (
-        <div className="min-h-screen bg-gray-900 text-white p-8 flex flex-col items-center">
-            {hasMissingParams ? (
-                <div className="w-full max-w-md bg-gray-800 rounded-lg shadow-lg p-6 text-center">
-                    <MdErrorOutline size={48} className="text-red-500 mx-auto mb-4" />
-                    <h2 className="text-2xl font-semibold text-red-500 mb-2">Missing Information</h2>
-                    <p className="text-gray-300">
-                        It seems some required details are missing. Please ensure you have provided a file URL, title, and back URL in the parameters.
-                    </p>
-                    <Link
-                        to="/"
-                        className="inline-block mt-4 px-6 py-2 bg-[#56C870] hover:bg-blue-400 text-white font-medium rounded shadow"
-                    >
-                        Go Back to Home
-                    </Link>
-                </div>
-            ) : (
-                <div className="w-full max-w-4xl bg-gray-800 rounded-lg shadow-lg p-6">
-                    <div className="flex justify-between items-center mb-6">
-                        <h2 className="text-3xl font-semibold text-[#56C870]">{title}</h2>
-                        <button onClick={() => handleCloseTab()} className="flex items-center text-red-500 hover:text-red-400">
-                            <MdClose size={24} className="mr-2" />
-                        </button>
-                    </div>
+  if (!show) return null;
+
+  const hasMissingParams = !fileUrl;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="w-full max-w-4xl bg-gray-800 rounded-lg shadow-lg p-6 relative">
+        <button
+          onClick={onClose}
+          className="absolute top-3 right-3 text-red-500 hover:text-red-400"
+        >
+          <MdClose size={24} />
+        </button>
 
-                    {isPdf ? (
-                        <embed
-                            src={fileUrl}
-                            type="application/pdf"
-                            width="100%"
-                            height="500px"
-                            className="rounded-lg shadow-lg"
-                        />
-                    ) : isImage ? (
-                        <img
-                            src={fileUrl}
-                            alt={title}
-                            className="w-full max-h-[500px] object-contain rounded-lg shadow-lg"
-                        />
-                    ) : (
-                        <div className="text-center text-red-500">Unsupported file type</div>
-                    )}
-                </div>
+        {hasMissingParams ? (
+          <div className="text-center">
+            <MdErrorOutline size={48} className="text-red-500 mx-auto mb-4" />
+            <h2 className="text-2xl font-semibold text-red-500 mb-2">
+              Missing Information
+            </h2>
+            <p className="text-gray-300">
+              It seems some required details are missing. Please ensure you have
+              provided a file URL.
+            </p>
+          </div>
+        ) : isLoading ? (
+          <div className="flex justify-center items-center h-[500px]">
+            <div className="animate-spin rounded-full h-12 w-12 border-t-4 border-b-4 border-[#56C870]"></div>
+          </div>
+        ) : loadError ? (
+          <div className="text-center">
+            <MdErrorOutline size={48} className="text-red-500 mx-auto mb-4" />
+            <h2 className="text-2xl font-semibold text-red-500 mb-2">
+              File Loading Error
+            </h2>
+            <p className="text-gray-300">
+              Unable to load the file. Please check the URL and try again.
+            </p>
+          </div>
+        ) : (
+          <div>
+            <h2 className="text-3xl font-semibold text-[#56C870] mb-4">
+              Document Preview
+            </h2>
+            {isPdf ? (
+              <embed
+                src={fileUrl}
+                type="application/pdf"
+                width="100%"
+                height="500px"
+                className="rounded-lg shadow-lg"
+              />
+            ) : isImage ? (
+              <img
+                src={fileUrl}
+                alt="Image Preview"
+                className="w-full max-h-[500px] object-contain rounded-lg shadow-lg"
+              />
+            ) : (
+              <div className="text-center text-red-500">
+                Unsupported file type
+              </div>
             )}
-        </div>
-    )
-}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+ViewExternalDocumentsModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  fileUrl: PropTypes.string,
+};
 
-export default ViewExternalDocuments
+export default ViewExternalDocumentsModal;
diff --git a/src/routes/routes.tsx b/src/routes/routes.tsx
index 2e26ca72..a6d645ba 100644
--- a/src/routes/routes.tsx
+++ b/src/routes/routes.tsx
@@ -84,7 +84,6 @@ import SingleBlogView from "../pages/Blogs/singleBlog";
 import SingleBlogPage from "../pages/LandingPage/SingleBlogPage"
 import LandingPage from "../pages/LandingPage/LandingPage";
 import Blogs from "../pages/Blogs/Blogs"
-import ViewExternalDocuments from "../pages/viewExternalDocuments";
 import Documents from "../pages/documents/documents";
 import UpdateDocumentation from "../pages/documents/updateDocumentation";
 import SingleDocumentationDetails from "../pages/documents/singleDocumentation";
@@ -101,10 +100,7 @@ function Navigation() {
       <Route path="/blogs" element={<Blogs />} />
       <Route path="/forget" element={<ForgotPasswordPage />} />
       <Route path="/reset-password" element={<ResetPasswordPage />} />
-      <Route path="/home" element={<LandingPage/>}/>      <Route path="/view-external-document" element={
-          <ViewExternalDocuments />
-      }
-      />
+      <Route path="/home" element={<LandingPage/>}/>      
       <Route path="/signup" element={<SignupPage />} />
       <Route path="/verifyEmail" element={<VerifyEmail />} />
       <Route path="/pageNotFound" element={<PageNotFound />} />