diff --git a/src/app/[locale]/applications/page.tsx b/src/app/[locale]/applications/page.tsx
index 437aff0..ba3ff15 100644
--- a/src/app/[locale]/applications/page.tsx
+++ b/src/app/[locale]/applications/page.tsx
@@ -31,6 +31,9 @@ export default function ApplcnPage({
   const currentPage = Number(searchParams?.page) || 1;
   const t = useTranslations();
 
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+  const [sortedColumn, setSortedColumn] = useState<string | null>(null);
+
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -58,6 +61,42 @@ export default function ApplcnPage({
     router.push(`?page=${page}`);
   };
 
+  function getTransformedStatus(status: string) {
+    if (status === "active" || status === "inprogress") {
+      return "Applied";
+    }
+    return toTitleCase(status);
+  }
+  const sortApplications = (column: string) => {
+    const order = column === sortedColumn && sortOrder === "asc" ? "desc" : "asc";
+    const sortedApplications = [...applications].sort((a, b) => {
+      if (column === "program_name") {
+        return order === "asc"
+          ? a.program_name.localeCompare(b.program_name)
+          : b.program_name.localeCompare(a.program_name);
+      } else if (column === "application_status") {
+        return order === "asc"
+          ? getTransformedStatus(a.application_status).localeCompare(
+              getTransformedStatus(b.application_status)
+            )
+          : getTransformedStatus(b.application_status).localeCompare(
+              getTransformedStatus(a.application_status)
+            );
+      } else if (column === "application_id") {
+        return order === "asc" ? a.application_id - b.application_id : b.application_id - a.application_id;
+      } else if (column === "date_applied") {
+        const dateA = new Date(a.date_applied).getTime();
+        const dateB = new Date(b.date_applied).getTime();
+        return order === "asc" ? dateA - dateB : dateB - dateA;
+      }
+      return 0;
+    });
+
+    setApplications(sortedApplications);
+    setSortOrder(order);
+    setSortedColumn(column);
+  };
+
   const isDataEmpty = !Array.isArray(applications) || applications.length < 1 || !applications;
 
   function getStatusClass(status: string) {
@@ -116,7 +155,10 @@ export default function ApplcnPage({
                         {t("No_")}
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3 ">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortApplications("program_name")}
+                        >
                           {t("Program Name")}
                           <svg
                             data-column="0"
@@ -131,7 +173,10 @@ export default function ApplcnPage({
                         </div>
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortApplications("application_status")}
+                        >
                           {t("Application Status")}
                           <svg
                             data-column="1"
@@ -146,7 +191,10 @@ export default function ApplcnPage({
                         </div>
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortApplications("application_id")}
+                        >
                           {t("Application ID")}
                           <svg
                             data-column="2"
@@ -161,7 +209,10 @@ export default function ApplcnPage({
                         </div>
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortApplications("date_applied")}
+                        >
                           {t("Date Applied")}
                           <svg
                             data-column="3"
diff --git a/src/app/[locale]/benefits/page.tsx b/src/app/[locale]/benefits/page.tsx
index 1084926..89761e4 100644
--- a/src/app/[locale]/benefits/page.tsx
+++ b/src/app/[locale]/benefits/page.tsx
@@ -31,6 +31,9 @@ export default function BenefPage({
   const currentPage = Number(searchParams?.page) || 1;
   const t = useTranslations();
 
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+  const [sortedColumn, setSortedColumn] = useState<string | null>(null);
+
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -58,6 +61,34 @@ export default function BenefPage({
     router.push(`?page=${page}`);
   };
 
+  const sortBenefits = (column: string) => {
+    const order = column === sortedColumn && sortOrder === "asc" ? "desc" : "asc";
+    const sortedBenefits = [...benefits].sort((a, b) => {
+      if (column === "program_name") {
+        return order === "asc"
+          ? a.program_name.localeCompare(b.program_name)
+          : b.program_name.localeCompare(a.program_name);
+      } else if (column === "entitlement_reference_number") {
+        return order === "asc"
+          ? a.entitlement_reference_number - b.entitlement_reference_number
+          : b.entitlement_reference_number - a.entitlement_reference_number;
+      } else if (column === "funds_awaited") {
+        return order === "asc" ? a.funds_awaited - b.funds_awaited : b.funds_awaited - a.funds_awaited;
+      } else if (column === "funds_received") {
+        return order === "asc" ? a.funds_received - b.funds_received : b.funds_received - a.funds_received;
+      } else if (column === "date_approved") {
+        const dateA = new Date(a.date_approved).getDate();
+        const dateB = new Date(b.date_approved).getDate();
+        return order === "asc" ? dateA - dateB : dateB - dateA;
+      }
+      return 0;
+    });
+
+    setBenefits(sortedBenefits);
+    setSortOrder(order);
+    setSortedColumn(column);
+  };
+
   const isDataEmpty = !Array.isArray(benefits) || benefits.length < 1 || !benefits;
 
   return (
@@ -96,7 +127,10 @@ export default function BenefPage({
                         {t("No_")}
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3 ">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortBenefits("program_name")}
+                        >
                           {t("Program Name")}
                           <svg
                             data-column="0"
@@ -111,7 +145,10 @@ export default function BenefPage({
                         </div>
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortBenefits("entitlement_reference_number")}
+                        >
                           {t("Entitlement Reference Number")}
                           <svg
                             data-column="1"
@@ -126,7 +163,10 @@ export default function BenefPage({
                         </div>
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortBenefits("funds_awaited")}
+                        >
                           {t("Funds Awaited")}
                           <svg
                             data-column="2"
@@ -141,7 +181,10 @@ export default function BenefPage({
                         </div>
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortBenefits("funds_received")}
+                        >
                           {t("Funds Received")}
                           <svg
                             data-column="3"
@@ -156,7 +199,10 @@ export default function BenefPage({
                         </div>
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortBenefits("date_approved")}
+                        >
                           {t("Date Approved")}
                           <svg
                             data-column="4"
diff --git a/src/app/[locale]/home/page.tsx b/src/app/[locale]/home/page.tsx
index 0c6223c..7e89ba1 100644
--- a/src/app/[locale]/home/page.tsx
+++ b/src/app/[locale]/home/page.tsx
@@ -29,6 +29,10 @@ export default function Page({
   const [paginatedPrograms, setPaginatedPrograms] = useState<ProgramDetails[]>([]);
   const [totalPages, setTotalPages] = useState<number>(0);
   const currentPage = Number(searchParams?.page) || 1;
+
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+  const [sortedColumn, setSortedColumn] = useState<string | null>(null);
+
   const t = useTranslations();
 
   useEffect(() => {
@@ -54,6 +58,34 @@ export default function Page({
     setPaginatedPrograms(programs.slice(start, end));
   }, [currentPage, programs]);
 
+  const sortPrograms = (column: string) => {
+    const order = column === sortedColumn && sortOrder === "asc" ? "desc" : "asc";
+    const sortedPrograms = [...programs].sort((a, b) => {
+      if (column === "program_name") {
+        return order === "asc"
+          ? a.program_name.localeCompare(b.program_name)
+          : b.program_name.localeCompare(a.program_name);
+      } else if (column === "enrollment_status") {
+        return order === "asc"
+          ? a.enrollment_status.localeCompare(b.enrollment_status)
+          : b.enrollment_status.localeCompare(a.enrollment_status);
+      } else if (column === "total_funds_awaited") {
+        return order === "asc"
+          ? a.total_funds_awaited - b.total_funds_awaited
+          : b.total_funds_awaited - a.total_funds_awaited;
+      } else if (column === "total_funds_received") {
+        return order === "asc"
+          ? a.total_funds_received - b.total_funds_received
+          : b.total_funds_received - a.total_funds_received;
+      }
+      return 0;
+    });
+
+    setPrograms(sortedPrograms);
+    setSortOrder(order);
+    setSortedColumn(column);
+  };
+
   const handlePageChange = (page: number) => {
     router.push(`?page=${page}`);
   };
@@ -96,7 +128,10 @@ export default function Page({
                         {t("No_")}
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3 ">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortPrograms("program_name")}
+                        >
                           {t("Program Name")}
                           <svg
                             data-column="0"
@@ -111,7 +146,10 @@ export default function Page({
                         </div>
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortPrograms("enrollment_status")}
+                        >
                           {t("Enrollment Status")}
                           <svg
                             data-column="1"
@@ -126,7 +164,10 @@ export default function Page({
                         </div>
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortPrograms("total_funds_awaited")}
+                        >
                           {t("Total Funds Awaited")}
                           <svg
                             data-column="2"
@@ -141,7 +182,10 @@ export default function Page({
                         </div>
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center w-max cursor-pointer"
+                          onClick={() => sortPrograms("total_funds_received")}
+                        >
                           {t("Total Funds Received")}
                           <svg
                             data-column="3"
diff --git a/src/app/[locale]/programs/page.tsx b/src/app/[locale]/programs/page.tsx
index e84fe95..ccd3eba 100644
--- a/src/app/[locale]/programs/page.tsx
+++ b/src/app/[locale]/programs/page.tsx
@@ -34,6 +34,9 @@ export default function ProgrmPage({
 
   const t = useTranslations();
 
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+  const [sortedColumn, setSortedColumn] = useState<string | null>(null);
+
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -70,6 +73,21 @@ export default function ProgrmPage({
     setPaginatedPrograms(programs.slice(start, end));
   }, [currentPage, programs]);
 
+  const sortPrograms = (column: string) => {
+    const order = column === sortedColumn && sortOrder === "asc" ? "desc" : "asc";
+    const sortedPrograms = [...programs].sort((a, b) => {
+      if (column === "name") {
+        return order === "asc" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
+      } else if (column === "program_status")
+        return order === "asc" ? a.state.localeCompare(b.state) : b.state.localeCompare(a.state);
+      return 0;
+    });
+
+    setPrograms(sortedPrograms);
+    setSortOrder(order);
+    setSortedColumn(column);
+  };
+
   const handlePageChange = (page: number) => {
     router.push(`?page=${page}`);
   };
@@ -310,7 +328,10 @@ export default function ProgrmPage({
                         {t("No_")}
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3 text-sm font-normal">
-                        <div className="flex items-center">
+                        <div
+                          className="flex items-center cursor-pointer"
+                          onClick={() => sortPrograms("name")}
+                        >
                           {t("Program Name")}
                           <Link href="#">
                             <svg
@@ -327,7 +348,10 @@ export default function ProgrmPage({
                       </th>
 
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center">
+                        <div
+                          className="flex items-center cursor-pointer"
+                          onClick={() => sortPrograms("program_status")}
+                        >
                           {t("Program Status")}
                           <Link href="#">
                             <svg
diff --git a/src/app/[locale]/reapply/page.tsx b/src/app/[locale]/reapply/page.tsx
index 32a8885..3e1f38c 100644
--- a/src/app/[locale]/reapply/page.tsx
+++ b/src/app/[locale]/reapply/page.tsx
@@ -35,9 +35,8 @@ export default function ApplcnPage() {
       case "completed":
         return "completedButton";
       case "active":
-        return "activeButton";
       case "inprogress":
-        return "inProgressButton";
+        return "appliedButton";
       case "rejected":
         return "rejectedButton";
       default:
@@ -148,7 +147,10 @@ export default function ApplcnPage() {
                             className={`top-14 text-xs  w-24 h-8 rounded-md text-center tracking-[0px] opacity-100 border-collapse border-[none] left-[811px] text-white ${getStatusClass(application.application_status)}`}
                             disabled={true}
                           >
-                            {toTitleCase(application.application_status)}
+                            {application.application_status === "active" ||
+                            application.application_status === "inprogress"
+                              ? "Applied"
+                              : toTitleCase(application.application_status)}
                           </button>
                         </td>
                         <td className="px-6 py-4">{application.application_id}</td>
diff --git a/src/app/[locale]/submission/page.tsx b/src/app/[locale]/submission/page.tsx
index ada875a..ee424ff 100644
--- a/src/app/[locale]/submission/page.tsx
+++ b/src/app/[locale]/submission/page.tsx
@@ -5,8 +5,8 @@ import {useSearchParams} from "next/navigation";
 import {useLocale, useTranslations} from "next-intl";
 import {useEffect, useState} from "react";
 import {AuthUtil} from "@/components/auth";
-import {ApplicationDetails} from "@/types";
-import {fetchApplicationDetails, fetchPrograms} from "@/utils";
+import {ApplicationDetails, Profile} from "@/types";
+import {fetchApplicationDetails, fetchPrograms, fetchProfile} from "@/utils";
 import {prefixBasePath} from "@/utils/path";
 
 export default function Submitted() {
@@ -15,11 +15,25 @@ export default function Submitted() {
 
   const [isToastVisible, setIsToastVisible] = useState(true);
   const [applicationDetails, setApplicationDetails] = useState<ApplicationDetails | null>(null);
+  const [profile, setProfile] = useState<Profile | null>(null);
   const searchParams = useSearchParams();
   const programId = searchParams.get("programId");
 
   const t = useTranslations();
 
+  useEffect(() => {
+    const fetchUserData = async () => {
+      try {
+        const userProfile = await fetchProfile();
+        setProfile(userProfile);
+      } catch (error) {
+        console.error("Error fetching user profile:", error);
+      }
+    };
+
+    fetchUserData();
+  }, []);
+
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -91,7 +105,9 @@ export default function Submitted() {
             <div className=" border border-gray-300 bg-brand container rounded-lg shadow-md">
               <div className="flex-col  flex-wrap justify-between items-center">
                 <div className="m-5 ">
-                  <p className="text-gray-900 mb-4">Dear User,</p>
+                  <p className="text-gray-900 mb-4">
+                    Dear {profile?.given_name} {profile?.family_name},
+                  </p>
                   <div className="text-gray-700 mb-4">
                     Thank you for submitting your form for the program {applicationDetails.program_name}. Your
                     application number is {applicationDetails.application_id}.
@@ -126,7 +142,10 @@ export default function Submitted() {
             <div className="basis-1/2 print:hidden mb-80 flex-col flex-wrap justify-between items-center border border-gray-300 bg-brand container pb-10 rounded-lg top-24 shadow-md ">
               <p className=" text-gray-700 pt-4 pl-4 pb-0  ">{applicationDetails.program_name}</p>
               <button className=" ml-4 mb-4 w-24 h-8 bg-blue-700 rounded-md text-white text-sm font-normal flex items-center justify-center ">
-                {applicationDetails.application_status}
+                {applicationDetails.application_status === "active" ||
+                applicationDetails.application_status === "inprogress"
+                  ? "Applied"
+                  : applicationDetails.application_status}
               </button>
               <hr className="border-t mx-0 border-gray-400 " />
               <div className="pt-4 text-sm text-gray-700 pl-4 pb-0 ">
diff --git a/src/app/[locale]/view/page.tsx b/src/app/[locale]/view/page.tsx
index 05625bf..733403f 100644
--- a/src/app/[locale]/view/page.tsx
+++ b/src/app/[locale]/view/page.tsx
@@ -27,6 +27,9 @@ export default function ApplcnPage() {
   const [totalPages, setTotalPages] = useState<number>(0);
   const [currentPage, setCurrentPage] = useState(1);
 
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+  const [sortedColumn, setSortedColumn] = useState<string | null>(null);
+
   const t = useTranslations();
   useEffect(() => {
     const fetchData = async () => {
@@ -85,6 +88,42 @@ export default function ApplcnPage() {
     });
   }
 
+  function getTransformedStatus(status: string) {
+    if (status === "active" || status === "inprogress") {
+      return "Applied";
+    }
+    return toTitleCase(status);
+  }
+  const sortApplications = (column: string) => {
+    const order = column === sortedColumn && sortOrder === "asc" ? "desc" : "asc";
+    const sortedApplications = [...applications].sort((a, b) => {
+      if (column === "program_name") {
+        return order === "asc"
+          ? a.program_name.localeCompare(b.program_name)
+          : b.program_name.localeCompare(a.program_name);
+      } else if (column === "application_status") {
+        return order === "asc"
+          ? getTransformedStatus(a.application_status).localeCompare(
+              getTransformedStatus(b.application_status)
+            )
+          : getTransformedStatus(b.application_status).localeCompare(
+              getTransformedStatus(a.application_status)
+            );
+      } else if (column === "application_id") {
+        return order === "asc" ? a.application_id - b.application_id : b.application_id - a.application_id;
+      } else if (column === "date_applied") {
+        const dateA = new Date(a.date_applied).getTime();
+        const dateB = new Date(b.date_applied).getTime();
+        return order === "asc" ? dateA - dateB : dateB - dateA;
+      }
+      return 0;
+    });
+
+    setApplications(sortedApplications);
+    setSortOrder(order);
+    setSortedColumn(column);
+  };
+
   return (
     <div>
       {isLoading ? (
@@ -121,7 +160,10 @@ export default function ApplcnPage() {
                         {t("No_")}
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3 ">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center cursor-pointer"
+                          onClick={() => sortApplications("program_name")}
+                        >
                           {t("Program Name")}
                           <svg
                             data-column="0"
@@ -136,7 +178,10 @@ export default function ApplcnPage() {
                         </div>
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center cursor-pointer"
+                          onClick={() => sortApplications("application_status")}
+                        >
                           {t("Application Status")}
                           <svg
                             data-column="1"
@@ -151,7 +196,10 @@ export default function ApplcnPage() {
                         </div>
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center cursor-pointer"
+                          onClick={() => sortApplications("application_id")}
+                        >
                           {t("Application ID")}
                           <svg
                             data-column="2"
@@ -166,7 +214,10 @@ export default function ApplcnPage() {
                         </div>
                       </th>
                       <th scope="col" className="columnTitle px-6 py-3">
-                        <div className="flex items-center w-max">
+                        <div
+                          className="flex items-center cursor-pointer"
+                          onClick={() => sortApplications("date_applied")}
+                        >
                           {t("Date Applied")}
                           <svg
                             data-column="3"
diff --git a/src/commons/styles/globals.css b/src/commons/styles/globals.css
index cea2d62..c9640dd 100644
--- a/src/commons/styles/globals.css
+++ b/src/commons/styles/globals.css
@@ -58,12 +58,11 @@ body {
   opacity: 1;
 }
 
-.inProgressButton {
+/* .inProgressButton {
   background: #2196f3 0% 0% no-repeat padding-box;
   border-radius: 4px;
   opacity: 1;
-}
-
+} */
 .rejectedButton {
   background: #f44336 0% 0% no-repeat padding-box;
   border-radius: 4px;