diff --git a/src/components/PaymentRequest/ManagePaymentRequest.jsx b/src/components/PaymentRequest/ManagePaymentRequest.jsx
index 8365a66d..ec451311 100644
--- a/src/components/PaymentRequest/ManagePaymentRequest.jsx
+++ b/src/components/PaymentRequest/ManagePaymentRequest.jsx
@@ -344,7 +344,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
         <div className="row my-2 text-start">
           <div className="col-md-6">
             <Label htmlFor="dueDate" className="form-label" required>
-              Due To Date
+              Due Date
             </Label>
             <DatePicker
               name="dueDate"
diff --git a/src/components/PaymentRequest/PaymentRequestList.jsx b/src/components/PaymentRequest/PaymentRequestList.jsx
index 241662be..6e399ed9 100644
--- a/src/components/PaymentRequest/PaymentRequestList.jsx
+++ b/src/components/PaymentRequest/PaymentRequestList.jsx
@@ -42,9 +42,8 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
           displayField = "Status";
           break;
         case "submittedBy":
-          key = `${item?.createdBy?.firstName ?? ""} ${
-            item.createdBy?.lastName ?? ""
-          }`.trim();
+          key = `${item?.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
+            }`.trim();
           displayField = "Submitted By";
           break;
         case "project":
@@ -97,9 +96,8 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
       label: "Submitted By",
       align: "text-start",
       getValue: (e) =>
-        `${e.createdBy?.firstName ?? ""} ${
-          e.createdBy?.lastName ?? ""
-        }`.trim() || "N/A",
+        `${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
+          }`.trim() || "N/A",
       customRender: (e) => (
         <div
           className="d-flex align-items-center cursor-pointer"
@@ -112,9 +110,8 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
             lastName={e.createdBy?.lastName}
           />
           <span className="text-truncate">
-            {`${e.createdBy?.firstName ?? ""} ${
-              e.createdBy?.lastName ?? ""
-            }`.trim() || "N/A"}
+            {`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
+              }`.trim() || "N/A"}
           </span>
         </div>
       ),
@@ -143,9 +140,8 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
       align: "text-center",
       getValue: (e) => (
         <span
-          className={`badge bg-label-${
-            getColorNameFromHex(e?.expenseStatus?.color) || "secondary"
-          }`}
+          className={`badge bg-label-${getColorNameFromHex(e?.expenseStatus?.color) || "secondary"
+            }`}
         >
           {e?.expenseStatus?.name || "Unknown"}
         </span>
@@ -181,10 +177,15 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
     "Action",
   ];
   if (isLoading) return <ExpenseTableSkeleton headers={header} />;
-
+  
   const grouped = groupBy
-    ? groupByField(data?.data ?? [], groupBy)
+    ? Object.fromEntries(
+      Object.entries(groupByField(data?.data ?? [], groupBy)).sort(([keyA], [keyB]) =>
+        keyA.localeCompare(keyB)
+      )
+    )
     : { All: data?.data ?? [] };
+
   const IsGroupedByDate = [
     { key: "transactionDate", displayField: "Transaction Date" },
     { key: "createdAt", displayField: "created Date" },
@@ -367,9 +368,8 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
                 {[...Array(totalPages)].map((_, index) => (
                   <li
                     key={index}
-                    className={`page-item ${
-                      currentPage === index + 1 ? "active" : ""
-                    }`}
+                    className={`page-item ${currentPage === index + 1 ? "active" : ""
+                      }`}
                   >
                     <button
                       className="page-link"