diff --git a/src/components/Invitation/ScheduleInterview.tsx b/src/components/Invitation/ScheduleInterview.tsx
index f4d63247..158e9945 100644
--- a/src/components/Invitation/ScheduleInterview.tsx
+++ b/src/components/Invitation/ScheduleInterview.tsx
@@ -22,7 +22,7 @@ const ScheduleInterview: React.FC<Props> = ({
   status,
   onClose,
   technicalInterviews = [],
-  availableStatuses = ["Scheduled", "Completed", "No show", "cancelled"],
+  availableStatuses = ["Scheduled", "Completed", "No show", "Cancelled"],
 }) => {
   const dispatch = useAppDispatch();
   const [isModelOpen, setIsModelOpen] = useState(false);
@@ -60,10 +60,8 @@ const ScheduleInterview: React.FC<Props> = ({
   useEffect(() => {
     // Ensure technicalInterviews is an array and has length
     if (Array.isArray(technicalInterviews) && technicalInterviews.length > 0) {
-      // Set the ID of the first interview in the array
       setSelectedInterviewId(technicalInterviews[0]._id);
     } else {
-      // Ensure we have a fallback
       setSelectedInterviewId("");
     }
   }, [technicalInterviews]);
@@ -120,35 +118,6 @@ const ScheduleInterview: React.FC<Props> = ({
     });
   };
 
-  //   const handleStatusUpdate = async (event: React.FormEvent) => {
-  //     event.preventDefault();
-
-  //     console.log("Current technicalInterviews:", technicalInterviews);
-  //     console.log("Current selectedInterviewId:", selectedInterviewId);
-
-  //     if (!newStatus) {
-  //       setError("Please select a status");
-  //       return;
-  //     }
-
-  //     // If no interview exists, prevent status update
-  //     if (!selectedInterviewId) {
-  //       setError("No interview found. Please schedule an interview first.");
-  //       return;
-  //     }
-
-  //     try {
-  //       setIsLoading(true);
-  //       await dispatch(updateInterviewStatuses(selectedInterviewId, newStatus));
-  //       onClose();
-  //       setIsLoading(false);
-  //     } catch (err) {
-  //       console.error("Error updating interview status:", err);
-  //       setError("Failed to update status");
-  //       setIsLoading(false);
-  //     }
-  //   };
-
   const handleStatusUpdate = async (event: React.FormEvent) => {
     event.preventDefault();
 
@@ -157,13 +126,11 @@ const ScheduleInterview: React.FC<Props> = ({
       return;
     }
 
-    // If no interview exists, prevent status update
     if (!selectedInterviewId) {
       setError("No interview found. Please schedule an interview first.");
       return;
     }
 
-    // Get the current interview's status
     const currentInterview = technicalInterviews.find(
       (interview) => interview._id === selectedInterviewId
     );
@@ -171,12 +138,11 @@ const ScheduleInterview: React.FC<Props> = ({
     // Define valid status transitions
     const validStatusTransitions = {
       Scheduled: ["Completed", "No show", "Cancelled"],
-      Completed: [], // No further transitions from Completed
-      Cancelled: [], // No further transitions from Cancelled
-      "No show": ["Scheduled"], // Can reschedule after a no-show
+      Completed: [],
+      Cancelled: [],
+      "No show": [],
     };
 
-    // Check if the status transition is valid
     if (currentInterview) {
       const currentStatus = currentInterview.status;
       const allowedNextStatuses = validStatusTransitions[currentStatus] || [];
@@ -209,11 +175,13 @@ const ScheduleInterview: React.FC<Props> = ({
           stage === "Rejected" ||
           stage === "Admitted" ||
           (technicalInterviews.length > 0 &&
-            technicalInterviews[0].status === "Completed")
+            (technicalInterviews[0].status === "Completed" ||
+              technicalInterviews[0].status === "Cancelled"))
         }
         className={`px-4 py-2 w-full text-sm font-medium text-white ${
           technicalInterviews.length > 0 &&
-          technicalInterviews[0].status === "Completed"
+          (technicalInterviews[0].status === "Completed" ||
+            technicalInterviews[0].status === "Cancelled")
             ? "bg-gray-400 cursor-not-allowed"
             : " bg-[#0c6a0c] hover:bg-[#367a4e] dark:bg-[#1bf84b8d] dark:hover:bg-emerald-700 dark:hover:text-gray-100 cursor-pointer"
         }  focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500`}
@@ -338,7 +306,30 @@ const ScheduleInterview: React.FC<Props> = ({
                     type="submit"
                     className="text-white bg-[#0c6a0c] dark:bg-[#56C870] hover:bg-[#4ab862] focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full px-5 py-2.5 text-center"
                   >
-                    {isLoading ? "Sending..." : "Send Invite"}
+                    {isLoading ? (
+                      <>
+                        <svg
+                          aria-hidden="true"
+                          role="status"
+                          className="inline w-4 h-4 me-3 text-white animate-spin"
+                          viewBox="0 0 100 101"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                            fill="#E5E7EB"
+                          />
+                          <path
+                            d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                        sending...
+                      </>
+                    ) : (
+                      "Send Invitation"
+                    )}
                   </button>
                 </form>
               )}
@@ -374,7 +365,30 @@ const ScheduleInterview: React.FC<Props> = ({
                     type="submit"
                     className="text-white bg-[#0c6a0c] dark:bg-[#56C870] hover:bg-[#4ab862] focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full px-5 py-2.5 text-center"
                   >
-                    {isLoading ? "Updating..." : "Update"}
+                    {isLoading ? (
+                      <>
+                        <svg
+                          aria-hidden="true"
+                          role="status"
+                          className="inline w-4 h-4 me-3 text-white animate-spin"
+                          viewBox="0 0 100 101"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                            fill="#E5E7EB"
+                          />
+                          <path
+                            d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                        updating...
+                      </>
+                    ) : (
+                      "Update"
+                    )}
                   </button>
                 </form>
               )}
diff --git a/src/pages/ApplicationCycle/myApplication.tsx b/src/pages/ApplicationCycle/myApplication.tsx
index 4cde7d53..9b1bfb50 100644
--- a/src/pages/ApplicationCycle/myApplication.tsx
+++ b/src/pages/ApplicationCycle/myApplication.tsx
@@ -1,324 +1,473 @@
 import { useEffect, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../hooks/hooks";
 import { toast, ToastContainer } from "react-toastify";
-import { AiFillFilePdf } from "react-icons/ai"
+import { AiFillFilePdf } from "react-icons/ai";
 
 import {
-    getApplicantCyclesApplications,
-    getCyclesApplicationAttributes,
-    getCyclesStages
+  getApplicantCyclesApplications,
+  getCyclesApplicationAttributes,
+  getCyclesStages,
 } from "../../redux/actions/applications";
 import { Link } from "react-router-dom";
 
 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);
+  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();
+  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>
+                    <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>
 
-                                        {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>
+        </div>
+      </div>
+    </>
+  );
 };
 
-export default MyApplication;
\ No newline at end of file
+export default MyApplication;
diff --git a/src/pages/TraineApplicant/ApplicantStages.tsx b/src/pages/TraineApplicant/ApplicantStages.tsx
index c5400745..a591ec7a 100644
--- a/src/pages/TraineApplicant/ApplicantStages.tsx
+++ b/src/pages/TraineApplicant/ApplicantStages.tsx
@@ -183,6 +183,17 @@ const ApplicantStages = (props: any) => {
     return dateObj.toLocaleDateString();
   };
 
+  const handleConvertInterviewDate = (date: string | number) => {
+    const timestamp =
+      typeof date === "string" && /^\d+$/.test(date) ? parseInt(date) : date;
+
+    const dateObj = new Date(timestamp);
+
+    return !isNaN(dateObj.getTime())
+      ? dateObj.toLocaleDateString()
+      : "Invalid Date";
+  };
+
   const handleTurnCutText = (text: string) => {
     if (text.length > 10) {
       return text.slice(0, 10) + "...";
@@ -324,7 +335,10 @@ const ApplicantStages = (props: any) => {
           </div>
           <div
             className={`${
-              filterStages === "Technical Assessment" ? "block" : "hidden"
+              filterStages === "Technical Assessment" ||
+              filterStages === "Interview Assessment"
+                ? "block"
+                : "hidden"
             }`}
           >
             <button
@@ -482,7 +496,12 @@ const ApplicantStages = (props: any) => {
                         </td>
                         <td className="px-5 py-5 border-b border-gray-200 dark:border-dark-tertiary text-xs">
                           <span className="inline-block px-3 py-2 bg-blue-100 text-blue-800 font-medium rounded-full">
-                            {handleConvertDate(item.createdAt)}
+                            {handleConvertInterviewDate(
+                              item.technicalInterviews &&
+                                item.technicalInterviews.length > 0
+                                ? item.technicalInterviews[0].updatedAt
+                                : handleConvertDate(item.createdAt)
+                            )}
                           </span>
                         </td>
                         <td className="px-5 py-5 border-b border-gray-200 dark:border-dark-tertiary text-xs">
@@ -608,40 +627,44 @@ const ApplicantStages = (props: any) => {
                     ) : null
                   )
                 ) : filterStages && filterData && filterData.length > 0 ? (
-                  filterData?.map((item, index: number) => (
-                    <tr
-                      key={item._id}
-                      className={`${
-                        index % 2 === 0
-                          ? "bg-white dark:bg-dark-bg"
-                          : "bg-gray-50 dark:bg-dark-tertiary"
-                      } hover:bg-gray-100 dark:hover:bg-gray-900 transition-colors duration-200`}
-                    >
-                      <td className="px-5 py-5 border-b border-gray-200 dark:border-dark-tertiary text-xs">
-                        <div className="flex">
-                          <div className="">
-                            <p className="text-gray-900 text-center dark:text-white whitespace-no-wrap">
-                              {item.applicant.firstName.toUpperCase() +
-                                " " +
-                                item.applicant.lastName}
-                            </p>
+                  filterData
+                    ?.filter(
+                      (item) => item.applicant.applicationPhase === filterStages
+                    )
+                    .map((item, index: number) => (
+                      <tr
+                        key={item._id}
+                        className={`${
+                          index % 2 === 0
+                            ? "bg-white dark:bg-dark-bg"
+                            : "bg-gray-50 dark:bg-dark-tertiary"
+                        } hover:bg-gray-100 dark:hover:bg-gray-900 transition-colors duration-200`}
+                      >
+                        <td className="px-5 py-5 border-b border-gray-200 dark:border-dark-tertiary text-xs">
+                          <div className="flex">
+                            <div className="">
+                              <p className="text-gray-900 text-center dark:text-white whitespace-no-wrap">
+                                {item.applicant.firstName.toUpperCase() +
+                                  " " +
+                                  item.applicant.lastName}
+                              </p>
+                            </div>
                           </div>
-                        </div>
-                      </td>
-
-                      <td className="px-5 py-5 border-b border-gray-200 dark:border-dark-tertiary text-xs">
-                        <div className="flex items-center">
-                          <div className="">
-                            <p className="text-gray-900 items-center dark:text-white whitespace-no-wrap">
-                              {item.applicant.email}
-                            </p>
+                        </td>
+
+                        <td className="px-5 py-5 border-b border-gray-200 dark:border-dark-tertiary text-xs">
+                          <div className="flex items-center">
+                            <div className="">
+                              <p className="text-gray-900 items-center dark:text-white whitespace-no-wrap">
+                                {item.applicant.email}
+                              </p>
+                            </div>
                           </div>
-                        </div>
-                      </td>
+                        </td>
 
-                      <td className="px-5 py-5 border-b border-gray-200 dark:border-dark-tertiary text-xs">
-                        <span
-                          className={`inline-block text-center px-1 py-2 min-w-20 max-w-16 rounded-full text-xs
+                        <td className="px-5 py-5 border-b border-gray-200 dark:border-dark-tertiary text-xs">
+                          <span
+                            className={`inline-block text-center px-1 py-2 min-w-20 max-w-16 rounded-full text-xs
                         ${
                           item.status === "Rejected"
                             ? "bg-red-200 text-red-500 font-medium"
@@ -649,152 +672,145 @@ const ApplicantStages = (props: any) => {
                             ? "bg-[#0c6a0c] dark:bg-[#1bf84b8d] text-white"
                             : "bg-gray-100 text-gray-800"
                         }`}
-                        >
-                          {/* {item.status} */}
-                          {getStatusText(item)}
-                        </span>
-                      </td>
-                      <td className="px-5 py-5 border-b border-gray-200 dark:border-dark-tertiary text-xs">
-                        <span className="inline-block px-3 py-1 bg-blue-100 text-blue-800 font-medium rounded-full">
-                          {handleConvertDate(item.updatedAt)}
-                        </span>
-                      </td>
-                      <td className="px-5 py-5 border-b border-gray-200 dark:border-dark-tertiary text-xs dark:text-gray-50">
-                        {handleTurnCutText(item.comments)}
-                      </td>
-                      {filterStages === "Technical Assessment" ||
-                      filterStages === "Interview Assessment" ? (
+                          >
+                            {getStatusText(item)}
+                          </span>
+                        </td>
                         <td className="px-5 py-5 border-b border-gray-200 dark:border-dark-tertiary text-xs">
-                          <span className="inline-block text-center px-1 py-2 min-w-20 max-w-16 bg-blue-100 text-blue-800 font-medium rounded-full">
-                            {item.score === null ? "No Score" : item.score}
+                          <span className="inline-block px-3 py-1 bg-blue-100 text-blue-800 font-medium rounded-full">
+                            {handleConvertInterviewDate(
+                              item.technicalInterviews &&
+                                item.technicalInterviews.length > 0
+                                ? item.technicalInterviews[0].updatedAt
+                                : handleConvertDate(item.updatedAt)
+                            )}
                           </span>
                         </td>
-                      ) : null}
-                      <td className="px-5 py-5 border-b border-gray-200 dark:border-dark-tertiary text-xs relative">
-                        <div className=" flex justify-center">
-                          <HiDotsVertical
-                            className=" text-black dark:text-white text-3xl cursor-pointer"
-                            onClick={(e: any) => {
-                              e.preventDefault();
-                              handleMoreOptions(item.applicant._id);
-                            }}
-                          />
-                          <div
-                            className={`${
-                              isMore === item.applicant._id ? "block" : "hidden"
-                            } absolute  bg-white dark:bg-dark-tertiary  dark:text-white text-base z-50 list-none divide-y divide-gray-100 rounded shadow my-4`}
-                            id="dropdown"
-                          >
-                            <ul className="py-1" aria-labelledby="dropdown">
-                              <li>
-                                <div
-                                  className={`${
-                                    filterStages === "Shortlisted" ||
-                                    ((filterStages === "Technical Assessment" ||
-                                      filterStages === "Interview Assessment" ||
-                                      filterStages === "Admitted" ||
-                                      filterStages === "Rejected") &&
-                                      (item.status === "Moved" ||
-                                        item.status === "Admitted" ||
-                                        item.status === "Rejected" ||
-                                        item.status === "Passed"))
-                                      ? "hidden"
-                                      : "block"
-                                  } text-xs hover:bg-gray-100 text-gray-700 dark:hover:bg-gray-500 dark:text-white px-4 py-2`}
-                                >
-                                  <AddApplicantScore
-                                    applicantId={item.applicant._id}
-                                    stage={item.applicant.applicationPhase}
-                                    onClose={handleReload}
-                                  />
-                                </div>
-                                <div
-                                  className={`${
-                                    filterStages === "Technical Assessment"
-                                      ? "block"
-                                      : "hidden"
-                                  }`}
-                                >
-                                  <ScheduleTechnical
-                                    traineeEmail={item.applicant.email}
+                        <td className="px-5 py-5 border-b border-gray-200 dark:border-dark-tertiary text-xs dark:text-gray-50">
+                          {handleTurnCutText(item.comments)}
+                        </td>
+                        {filterStages === "Technical Assessment" ||
+                        filterStages === "Interview Assessment" ? (
+                          <td className="px-5 py-5 border-b border-gray-200 dark:border-dark-tertiary text-xs">
+                            <span className="inline-block text-center px-1 py-2 min-w-20 max-w-16 bg-blue-100 text-blue-800 font-medium rounded-full">
+                              {item.score === null ? "No Score" : item.score}
+                            </span>
+                          </td>
+                        ) : null}
+                        <td className="px-5 py-5 border-b border-gray-200 dark:border-dark-tertiary text-xs relative">
+                          <div className=" flex justify-center">
+                            <HiDotsVertical
+                              className=" text-black dark:text-white text-3xl cursor-pointer"
+                              onClick={(e: any) => {
+                                e.preventDefault();
+                                handleMoreOptions(item.applicant._id);
+                              }}
+                            />
+                            <div
+                              className={`${
+                                isMore === item.applicant._id
+                                  ? "block"
+                                  : "hidden"
+                              } absolute  bg-white dark:bg-dark-tertiary  dark:text-white text-base z-50 list-none divide-y divide-gray-100 rounded shadow my-4`}
+                              id="dropdown"
+                            >
+                              <ul className="py-1" aria-labelledby="dropdown">
+                                <li>
+                                  <div
+                                    className={`${
+                                      filterStages === "Shortlisted" ||
+                                      ((filterStages ===
+                                        "Technical Assessment" ||
+                                        filterStages ===
+                                          "Interview Assessment" ||
+                                        filterStages === "Admitted" ||
+                                        filterStages === "Rejected") &&
+                                        (item.status === "Moved" ||
+                                          item.status === "Admitted" ||
+                                          item.status === "Rejected" ||
+                                          item.status === "Passed"))
+                                        ? "hidden"
+                                        : "block"
+                                    } text-xs hover:bg-gray-100 text-gray-700 dark:hover:bg-gray-500 dark:text-white px-4 py-2`}
+                                  >
+                                    <AddApplicantScore
+                                      applicantId={item.applicant._id}
+                                      stage={item.applicant.applicationPhase}
+                                      onClose={handleReload}
+                                    />
+                                  </div>
+                                </li>
+                                <li>
+                                  <div
+                                    className={`${
+                                      filterStages === "Technical Assessment" &&
+                                      (item.status !== "Moved" ||
+                                        item.status !== "Admitted" ||
+                                        item.status !== "Rejected" ||
+                                        item.status !== "Passed")
+                                        ? "block"
+                                        : "hidden"
+                                    }`}
+                                  >
+                                    <ScheduleTechnical
+                                      traineeEmail={item.applicant.email}
+                                      applicantId={item.applicant._id}
+                                      stage={item.applicant.applicationPhase}
+                                      onClose={handleReload}
+                                      status={item.status}
+                                    />
+                                  </div>
+                                </li>
+                                <li>
+                                  <div
+                                    className={`${
+                                      filterStages === "Interview Assessment" &&
+                                      item.status !== "Moved" &&
+                                      item.status !== "Admitted" &&
+                                      item.status !== "Rejected" &&
+                                      item.status !== "Passed"
+                                        ? "block"
+                                        : "hidden"
+                                    }`}
+                                  >
+                                    <ScheduleInterview
+                                      applicantId={item.applicant._id}
+                                      stage={item.applicant.applicationPhase}
+                                      onClose={handleReload}
+                                      technicalInterviews={
+                                        item.technicalInterviews || []
+                                      }
+                                      status={item.status}
+                                    />
+                                  </div>
+                                </li>
+                                <li>
+                                  <NextStageModal
                                     applicantId={item.applicant._id}
                                     stage={item.applicant.applicationPhase}
-                                    onClose={handleReload}
                                     status={item.status}
-                                  />
-                                </div>
-                              </li>
-                              <li>
-                                <div
-                                  className={`${
-                                    filterStages === "Technical Assessment" &&
-                                    (item.status !== "Moved" ||
-                                      item.status !== "Admitted" ||
-                                      item.status !== "Rejected" ||
-                                      item.status !== "Passed")
-                                      ? "block"
-                                      : "hidden"
-                                  }`}
-                                >
-                                  <ScheduleTechnical
-                                    traineeEmail={item.applicant.email}
-                                    applicantId={item.applicant._id}
-                                    stage={item.applicant.applicationPhase}
                                     onClose={handleReload}
-                                    status={item.status}
                                   />
-                                </div>
-                              </li>
-                              <li>
-                                <div
-                                  className={`${
-                                    filterStages === "Interview Assessment" &&
-                                    item.status !== "Moved" &&
-                                    item.status !== "Admitted" &&
-                                    item.status !== "Rejected" &&
-                                    item.status !== "Passed"
-                                      ? "block"
-                                      : "hidden"
-                                  }`}
-                                >
-                                  <ScheduleInterview
+                                </li>
+                                <li>
+                                  <DismissTraineeApplicant
                                     applicantId={item.applicant._id}
-                                    stage={item.applicant.applicationPhase}
-                                    onClose={handleReload}
-                                    technicalInterviews={
-                                      item.technicalInterviews || []
+                                    applicantName={
+                                      item.applicant.firstName +
+                                      " " +
+                                      item.applicant.lastName
                                     }
+                                    stage={item.currentStage}
                                     status={item.status}
+                                    onClose={handleReload}
                                   />
-                                </div>
-                              </li>
-                              <li>
-                                <NextStageModal
-                                  applicantId={item.applicant._id}
-                                  stage={item.applicant.applicationPhase}
-                                  status={item.status}
-                                  onClose={handleReload}
-                                />
-                              </li>
-                              <li>
-                                <DismissTraineeApplicant
-                                  applicantId={item.applicant._id}
-                                  applicantName={
-                                    item.applicant.firstName +
-                                    " " +
-                                    item.applicant.lastName
-                                  }
-                                  stage={item.currentStage}
-                                  status={item.status}
-                                  onClose={handleReload}
-                                />
-                              </li>
-                            </ul>
+                                </li>
+                              </ul>
+                            </div>
                           </div>
-                        </div>
-                      </td>
-                    </tr>
-                  ))
+                        </td>
+                      </tr>
+                    ))
                 ) : (
                   <tr>
                     <td colSpan={5} className="text-center dark:text-white">
diff --git a/src/redux/actions/applicationStage.ts b/src/redux/actions/applicationStage.ts
index af858793..c86494b0 100644
--- a/src/redux/actions/applicationStage.ts
+++ b/src/redux/actions/applicationStage.ts
@@ -186,22 +186,22 @@ export const filterStage = (stage: string) => async (dispatch: any) => {
       meetingPlatform
       status
       scheduledDate
+      createdAt
+      updatedAt
       coordinatorId {
         firstname
         lastname
       }
     }
     status
-  }
-  status
-  comments
-  score
-  platform
-  invitationLink
-  updatedAt
-  createdAt
-  }
-}`,
+    comments
+    score
+    platform
+    invitationLink
+    updatedAt
+    createdAt
+    }
+  }`,
       variables: {
         stage: stage,
       },
@@ -328,65 +328,6 @@ export const sendInterviewInvitations =
     }
   };
 
-// export const updateInterviewStatuses =
-//   (interviewId: string, status: string) => async (dispatch: any) => {
-//     console.log("ATTEMPTING TO UPDATE THE INTERVEIW STATUS:", {
-//       interviewId,
-//       status,
-//       type: typeof interviewId,
-//     });
-
-//     dispatch({
-//       type: updateInterviewStatus.UPDATE_INTERVIEW_STATUS_LOADING,
-//       message: "loading",
-//     });
-
-//     try {
-//       const response = await axios.post("/", {
-//         query: `mutation UpdateInterviewStatus($input: UpdateInterviewStatusInput!) {
-//   updateInterviewStatus(input: $input) {
-//     success
-//     message
-//   }
-// }`,
-//         variables: {
-//           interviewId,
-//           status,
-//         },
-//       });
-
-//       console.log("FULL RESPONSE =>>>>>:", response.data);
-
-//       if (response.data?.data?.updateInterviewStatus) {
-//         dispatch({
-//           type: updateInterviewStatus.UPDATE_INTERVIEW_STATUS_SUCCESS,
-//           data: response.data.data.updateInterviewStatus,
-//         });
-//         toast.success(response.data.data.updateInterviewStatus.message);
-//       } else if (response.data.errors) {
-//         const errorMessage = response.data.errors[0].message;
-//         dispatch({
-//           type: updateInterviewStatus.UPDATE_INTERVIEW_STATUS_FAIL,
-//           error: errorMessage,
-//         });
-//         toast.error(errorMessage);
-//       } else {
-//         dispatch({
-//           type: updateInterviewStatus.UPDATE_INTERVIEW_STATUS_FAIL,
-//           error: "No data returned from the server",
-//         });
-//         toast.error("Failed to update interview status");
-//       }
-//     } catch (error) {
-//       dispatch({
-//         type: updateInterviewStatus.UPDATE_INTERVIEW_STATUS_FAIL,
-//         error: "No data returned from the server",
-//       });
-//       console.error(error);
-//       toast.error("Failed to schedule interview");
-//     }
-//   };
-
 export const updateInterviewStatuses =
   (interviewId: string, status: string) => async (dispatch: any) => {
     dispatch({
diff --git a/src/redux/actions/deletetraine.ts b/src/redux/actions/deletetraine.ts
index 8df173bd..6fda2df2 100644
--- a/src/redux/actions/deletetraine.ts
+++ b/src/redux/actions/deletetraine.ts
@@ -174,6 +174,7 @@ export const fetchtraine = ({ page, itemsPerPage, All }: any) => {
                         status
                         scheduledDate
                         createdAt
+                        updatedAt
                         coordinatorId {
                             _id
                             firstname
diff --git a/src/utils/exports/exportToExcel.ts b/src/utils/exports/exportToExcel.ts
index 7264adf3..0a745a36 100644
--- a/src/utils/exports/exportToExcel.ts
+++ b/src/utils/exports/exportToExcel.ts
@@ -119,7 +119,7 @@ export const exportInterviewDataToExcel = ({
         EMAIL: email,
         "FIRST NAME": firstName,
         "LAST NAME": lastName,
-        STATUS: interviewStatus,
+        STATUS: interviewStatus || "N/A",
         "MEETING PLATFORM": meetingPlatform || "N/A",
       };
     })