diff --git a/src/components/Expenses/ManageExpense.jsx b/src/components/Expenses/ManageExpense.jsx
index 724899c7..40b4bebf 100644
--- a/src/components/Expenses/ManageExpense.jsx
+++ b/src/components/Expenses/ManageExpense.jsx
@@ -32,8 +32,11 @@ import Label from "../common/Label";
 import EmployeeSearchInput from "../common/EmployeeSearchInput";
 import Filelist from "./Filelist";
 import { DEFAULT_CURRENCY } from "../../utils/constants";
-import SelectEmployeeServerSide, { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
+import SelectEmployeeServerSide, {
+  SelectProjectField,
+} from "../common/Forms/SelectFieldServerSide";
 import { useAllocationServiceProjectTeam } from "../../hooks/useServiceProject";
+import { AppFormController } from "../../hooks/appHooks/useAppForm";
 
 const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
   const {
@@ -153,15 +156,14 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
     }
   };
 
-  const { mutate: AllocationTeam, isPending1 } = useAllocationServiceProjectTeam(
-    () => {
+  const { mutate: AllocationTeam, isPending1 } =
+    useAllocationServiceProjectTeam(() => {
       setSelectedEmployees([]);
       setSeletingEmp({
         employee: null,
         isOpen: false,
       });
-    }
-  );
+    });
   useEffect(() => {
     if (expenseToEdit && data) {
       reset({
@@ -180,17 +182,17 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
         currencyId: data.currency.id || DEFAULT_CURRENCY,
         billAttachments: data.documents
           ? data.documents.map((doc) => ({
-            fileName: doc.fileName,
-            base64Data: null,
-            contentType: doc.contentType,
-            documentId: doc.documentId,
-            fileSize: 0,
-            description: "",
-            preSignedUrl: doc.preSignedUrl,
-            isActive: doc.isActive ?? true,
-          }))
+              fileName: doc.fileName,
+              base64Data: null,
+              contentType: doc.contentType,
+              documentId: doc.documentId,
+              fileSize: 0,
+              description: "",
+              preSignedUrl: doc.preSignedUrl,
+              isActive: doc.isActive ?? true,
+            }))
           : [],
-      });     
+      });
     }
   }, [data, reset]);
   const { mutate: ExpenseUpdate, isPending } = useUpdateExpense(() =>
@@ -264,7 +266,6 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               required
               placeholder="Select Project"
               value={watch("projectId")}
-
               onChange={(val) =>
                 setValue("projectId", val, {
                   shouldDirty: true,
@@ -337,16 +338,30 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             )}
           </div>
           <div className="col-12 col-md-6 text-start">
-            <Label className="form-label" required>
+            {/* <Label className="form-label" required>
               Paid By{" "}
-            </Label>
-            <EmployeeSearchInput
+            </Label> */}
+            {/* <EmployeeSearchInput
               control={control}
               name="paidById"
               projectId={null}
               forAll={true}
+            /> */}
+
+            <AppFormController
+              name="paidById"
+              
+              control={control}
+              render={({ field }) => (
+                <SelectEmployeeServerSide
+                label="Paid By" required
+                  value={field.value}
+                  onChange={field.onChange}
+                  isFullObject={false} // because using ID
+                />
+              )}
             />
-          </div>         
+          </div>
         </div>
 
         <div className="row my-2 text-start">
@@ -453,7 +468,6 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               <small className="danger-text">{errors.gstNumber.message}</small>
             )}
           </div>
-
         </div>
         <div className="row">
           <div className="col-md-6 text-start ">
@@ -484,7 +498,9 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
           </div>
           {expenseCategory?.noOfPersonsRequired && (
             <div className="col-md-6  text-start">
-              <Label className="form-label" required>No. of Persons</Label>
+              <Label className="form-label" required>
+                No. of Persons
+              </Label>
               <input
                 type="number"
                 id="noOfPersons"
@@ -570,7 +586,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
                     (fileError?.fileSize?.message ||
                       fileError?.contentType?.message ||
                       fileError?.base64Data?.message,
-                      fileError?.documentId?.message)
+                    fileError?.documentId?.message)
                   }
                 </div>
               ))}
@@ -595,8 +611,8 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             {isPending || createPending
               ? "Please Wait..."
               : expenseToEdit
-                ? "Update"
-                : "Save as Draft"}
+              ? "Update"
+              : "Save as Draft"}
           </button>
         </div>
       </form>
diff --git a/src/components/PaymentRequest/ManagePaymentRequest.jsx b/src/components/PaymentRequest/ManagePaymentRequest.jsx
index 14f911fa..dcbe78af 100644
--- a/src/components/PaymentRequest/ManagePaymentRequest.jsx
+++ b/src/components/PaymentRequest/ManagePaymentRequest.jsx
@@ -29,6 +29,7 @@ import Filelist from "../Expenses/Filelist";
 import InputSuggestions from "../common/InputSuggestion";
 import { useProfile } from "../../hooks/useProfile";
 import { blockUI } from "../../utils/blockUI";
+import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
 
 function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
   const {
@@ -234,10 +235,10 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
         {/* Project and Category */}
         <div className="row my-2 text-start">
           <div className="col-md-6">
-            <Label className="form-label" required>
+            {/* <Label className="form-label" required>
               Select Project
-            </Label>
-            <select
+            </Label> */}
+            {/* <select
               className="form-select form-select-sm"
               {...register("projectId")}
               disabled={
@@ -254,7 +255,23 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
                   </option>
                 ))
               )}
-            </select>
+            </select> */}
+            <SelectProjectField
+              label="Project"
+              required
+              placeholder="Select Project"
+              value={watch("projectId")}
+              onChange={(val) =>
+                setValue("projectId", val, {
+                  shouldDirty: true,
+                  shouldValidate: true,
+                })
+                
+              }
+                disabled={
+                data?.recurringPayment?.isVariable && !isDraft && !isProcessed
+              }
+            />
             {errors.projectId && (
               <small className="danger-text">{errors.projectId.message}</small>
             )}
diff --git a/src/components/Project/ProjectCardView.jsx b/src/components/Project/ProjectCardView.jsx
index cb44fd2a..3c439fbc 100644
--- a/src/components/Project/ProjectCardView.jsx
+++ b/src/components/Project/ProjectCardView.jsx
@@ -8,7 +8,12 @@ const ProjectCardView = ({ data, currentPage, totalPages, paginate }) => {
   return (
     <div className="row page-min-h">
       {data?.length === 0 && (
-        <p className="text-center text-muted">No projects found.</p>
+        <div
+          className="col-12 d-flex justify-content-center align-items-center"
+          style={{ minHeight: "250px" }} 
+        >
+          <p className="text-center text-muted m-0">No Infra projects found.</p>
+        </div>
       )}
 
       {data?.map((project) => (
diff --git a/src/components/Project/ProjectListView.jsx b/src/components/Project/ProjectListView.jsx
index 2741801e..9d0c6acb 100644
--- a/src/components/Project/ProjectListView.jsx
+++ b/src/components/Project/ProjectListView.jsx
@@ -126,8 +126,8 @@ const ProjectListView = ({ data, currentPage, totalPages, paginate }) => {
 
   return (
     <div className="card page-min-h py-4 px-6 shadow-sm">
-      <div className="table-responsive text-nowrap page-min-h">
-        <table className="table  table-hover align-middle m-0">
+      <div className="table-responsive text-nowrap">
+        <table className="table table-hover align-middle m-0">
           <thead className="border-bottom ">
             <tr>
               {projectColumns.map((col) => (
@@ -143,77 +143,94 @@ const ProjectListView = ({ data, currentPage, totalPages, paginate }) => {
             </tr>
           </thead>
           <tbody>
-            {data?.map((project) => (
-              <tr key={project.id}>
-                {projectColumns.map((col) => (
-                  <td
-                    key={col.key}
-                    colSpan={col.colSpan}
-                    className={`${col.className} py-5`}
-                    style={{ paddingTop: "20px", paddingBottom: "20px" }}
-                  >
-                    {col.getValue
-                      ? col.getValue(project)
-                      : project[col.key] || "N/A"}
-                  </td>
-                ))}
-                <td
-                  className={`mx-2 ${
-                    canManageProject ? "d-sm-table-cell" : "d-none"
-                  }`}
-                >
-                  <div className="dropdown z-2">
-                    <button
-                      type="button"
-                      className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
-                      data-bs-toggle="dropdown"
-                      aria-expanded="false"
+            {data?.length > 0 ? (
+              data?.map((project) => (
+                <tr key={project.id}>
+                  {projectColumns.map((col) => (
+                    <td
+                      key={col.key}
+                      colSpan={col.colSpan}
+                      className={`${col.className} py-5`}
+                      style={{ paddingTop: "20px", paddingBottom: "20px" }}
                     >
-                      <i
-                        className="bx bx-dots-vertical-rounded bx-sm text-muted"
-                        data-bs-toggle="tooltip"
-                        data-bs-offset="0,8"
-                        data-bs-placement="top"
-                        data-bs-custom-class="tooltip-dark"
-                        title="More Action"
-                      ></i>
-                    </button>
-                    <ul className="dropdown-menu dropdown-menu-end">
-                      <li>
-                        <a
-                          aria-label="click to  View details"
-                          className="dropdown-item cursor-pointer"
-                        >
-                          <i className="bx bx-detail me-2"></i>
-                          <span className="align-left">View details</span>
-                        </a>
-                      </li>
+                      {col.getValue
+                        ? col.getValue(project)
+                        : project[col.key] || "N/A"}
+                    </td>
+                  ))}
+                  <td
+                    className={`mx-2 ${canManageProject ? "d-sm-table-cell" : "d-none"
+                      }`}
+                  >
+                    <div className="dropdown z-2">
+                      <button
+                        type="button"
+                        className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
+                        data-bs-toggle="dropdown"
+                        aria-expanded="false"
+                      >
+                        <i
+                          className="bx bx-dots-vertical-rounded bx-sm text-muted"
+                          data-bs-toggle="tooltip"
+                          data-bs-offset="0,8"
+                          data-bs-placement="top"
+                          data-bs-custom-class="tooltip-dark"
+                          title="More Action"
+                        ></i>
+                      </button>
+                      <ul className="dropdown-menu dropdown-menu-end">
+                        <li>
+                          <a
+                            aria-label="click to  View details"
+                            className="dropdown-item cursor-pointer"
+                          >
+                            <i className="bx bx-detail me-2"></i>
+                            <span className="align-left">View details</span>
+                          </a>
+                        </li>
 
-                      <li>
-                        <a
-                          className="dropdown-item cursor-pointer"
-                          onClick={() =>
-                            setMangeProject({
-                              isOpen: true,
-                              Project: project.id,
-                            })
-                          }
-                        >
-                          <i className="bx bx-pencil me-2"></i>
-                          <span className="align-left">Modify</span>
-                        </a>
-                      </li>
-                      <li onClick={() => handleViewActivities(project.id)}>
-                        <a className="dropdown-item cursor-pointer">
-                          <i className="bx bx-task me-2"></i>
-                          <span className="align-left">Activities</span>
-                        </a>
-                      </li>
-                    </ul>
-                  </div>
+                        <li>
+                          <a
+                            className="dropdown-item cursor-pointer"
+                            onClick={() =>
+                              setMangeProject({
+                                isOpen: true,
+                                Project: project.id,
+                              })
+                            }
+                          >
+                            <i className="bx bx-pencil me-2"></i>
+                            <span className="align-left">Modify</span>
+                          </a>
+                        </li>
+                        <li onClick={() => handleViewActivities(project.id)}>
+                          <a className="dropdown-item cursor-pointer">
+                            <i className="bx bx-task me-2"></i>
+                            <span className="align-left">Activities</span>
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr
+                className="no-hover"
+                style={{
+                  pointerEvents: "none", 
+                  backgroundColor: "transparent",
+                }}
+              >
+                <td
+                  colSpan={projectColumns.length + 1}
+                  className="text-center align-middle"
+                  style={{ height: "300px", borderBottom: "none" }}
+                >
+                  No Infra projects available
                 </td>
               </tr>
-            ))}
+            )}
           </tbody>
         </table>
       </div>
diff --git a/src/components/RecurringExpense/ManageRecurringExpense.jsx b/src/components/RecurringExpense/ManageRecurringExpense.jsx
index aad3c468..a399867d 100644
--- a/src/components/RecurringExpense/ManageRecurringExpense.jsx
+++ b/src/components/RecurringExpense/ManageRecurringExpense.jsx
@@ -27,6 +27,7 @@ import InputSuggestions from "../common/InputSuggestion";
 import { useEmployeesName } from "../../hooks/useEmployees";
 import PmsEmployeeInputTag from "../common/PmsEmployeeInputTag";
 import HoverPopup from "../common/HoverPopup";
+import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
 
 const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
   const {
@@ -131,7 +132,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
     }
   }, [currencyData, requestToEdit, setValue]);
 
-  const StrikeDate = watch("strikeDate")
+  const StrikeDate = watch("strikeDate");
 
   const onSubmit = (fromdata) => {
     let payload = {
@@ -163,10 +164,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
         {/* Project and Category */}
         <div className="row my-2 text-start">
           <div className="col-md-6">
-            <Label className="form-label" required>
-              Select Project
-            </Label>
-            <select
+            {/* <select
               className="form-select form-select-sm"
               {...register("projectId")}
             >
@@ -180,7 +178,19 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
                   </option>
                 ))
               )}
-            </select>
+            </select> */}
+            <SelectProjectField
+              label="Select Project"
+              required
+              placeholder="Select Project"
+              value={watch("projectId")}
+              onChange={(val) =>
+                setValue("projectId", val, {
+                  shouldDirty: true,
+                  shouldValidate: true,
+                })
+              }
+            />
             {errors.projectId && (
               <small className="danger-text">{errors.projectId.message}</small>
             )}
@@ -235,7 +245,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
           </div>
 
           <div className="col-md-6 mt-2">
-            <div className="d-flex justify-content-start align-items-center gap-2">
+            <div className="d-flex justify-content-start align-items-center text-nowrap gap-2">
               <Label htmlFor="isVariable" className="form-label mb-0" required>
                 Payment Type
               </Label>
@@ -243,13 +253,16 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
                 title="Payment Type"
                 id="payment_type"
                 content={
-                  <p>
-                    Choose whether the payment amount varies or remains fixed each cycle.
-                    <br />
-                    <strong>Is Variable:</strong> Amount changes per cycle.
-                    <br />
-                    <strong>Fixed:</strong> Amount stays constant.
-                  </p>
+                  <div className=" w-50">
+                    <p>
+                      Choose whether the payment amount varies or remains fixed
+                      each cycle.
+                      <br />
+                      <strong>Is Variable:</strong> Amount changes per cycle.
+                      <br />
+                      <strong>Fixed:</strong> Amount stays constant.
+                    </p>
+                  </div>
                 }
               >
                 <i className="bx bx-info-circle bx-sm text-muted cursor-pointer"></i>
@@ -270,7 +283,10 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
                       checked={field.value === true}
                       onChange={() => field.onChange(true)}
                     />
-                    <Label htmlFor="isVariableTrue" className="form-check-label">
+                    <Label
+                      htmlFor="isVariableTrue"
+                      className="form-check-label"
+                    >
                       Is Variable
                     </Label>
                   </div>
@@ -283,7 +299,10 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
                       checked={field.value === false}
                       onChange={() => field.onChange(false)}
                     />
-                    <Label htmlFor="isVariableFalse" className="form-check-label">
+                    <Label
+                      htmlFor="isVariableFalse"
+                      className="form-check-label"
+                    >
                       Fixed
                     </Label>
                   </div>
@@ -295,7 +314,6 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
               <small className="danger-text">{errors.isVariable.message}</small>
             )}
           </div>
-
         </div>
 
         {/* Date and Amount */}
@@ -391,11 +409,12 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
                 id="frequency"
                 content={
                   <p>
-                    Defines how often payments or billing occur, such as monthly, quarterly, or annually.
+                    Defines how often payments or billing occur, such as
+                    monthly, quarterly, or annually.
                   </p>
                 }
               >
-                <i className="bx bx-info-circle bx-sm text-muted cursor-pointer"></i>
+                <i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
               </HoverPopup>
             </div>
 
@@ -444,10 +463,13 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
 
         {/* Payment Buffer Days and End Date */}
         <div className="row my-2 text-start">
-
           <div className="col-md-6">
-            <div className="d-flex justify-content-start align-items-center gap-2">
-              <Label htmlFor="paymentBufferDays" className="form-label mb-0" required>
+            <div className="d-flex justify-content-start align-items-center text-nowrap gap-2">
+              <Label
+                htmlFor="paymentBufferDays"
+                className="form-label mb-0 "
+                required
+              >
                 Payment Buffer Days
               </Label>
               <HoverPopup
@@ -455,11 +477,12 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
                 id="payment_buffer_days"
                 content={
                   <p>
-                    Number of extra days allowed after the due date before payment is considered late.
+                    Number of extra days allowed after the due date before
+                    payment is considered late.
                   </p>
                 }
               >
-                <i className="bx bx-info-circle bx-sm text-muted cursor-pointer"></i>
+                <i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
               </HoverPopup>
             </div>
 
@@ -480,9 +503,8 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             )}
           </div>
 
-
           <div className="col-md-6">
-            <div className="d-flex justify-content-start align-items-center gap-2">
+            <div className="d-flex justify-content-start align-items-center text-nowrap gap-2">
               <Label htmlFor="endDate" className="form-label mb-0" required>
                 End Date
               </Label>
@@ -495,7 +517,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
                   </p>
                 }
               >
-                <i className="bx bx-info-circle bx-sm text-muted cursor-pointer"></i>
+                <i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
               </HoverPopup>
             </div>
 
@@ -510,10 +532,8 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
               <small className="danger-text">{errors.endDate.message}</small>
             )}
           </div>
-
         </div>
 
-
         <div className="row my-2 text-start">
           <div className="col-md-6">
             <Label htmlFor="notifyTo" className="form-label" required>
@@ -572,8 +592,8 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             {createPending || isPending
               ? "Please wait...."
               : requestToEdit
-                ? "Update"
-                : "Save as Draft"}
+              ? "Update"
+              : "Save as Draft"}
           </button>
         </div>
       </form>
diff --git a/src/components/ServiceProject/JobList.jsx b/src/components/ServiceProject/JobList.jsx
index 84066253..147199f8 100644
--- a/src/components/ServiceProject/JobList.jsx
+++ b/src/components/ServiceProject/JobList.jsx
@@ -130,7 +130,7 @@ const JobList = ({ isArchive }) => {
       {isArchiveModalOpen && (
         <ConfirmModal
           isOpen={isArchiveModalOpen}
-          type={isArchiveAction ? "success" : "undo"}
+          type={isArchiveAction ? "archive" : "Un-archive"}
           header={isArchiveAction ? "Archive Job" : "Restore Job"}
           message={
             isArchiveAction
diff --git a/src/components/ServiceProject/Jobs.jsx b/src/components/ServiceProject/Jobs.jsx
index 832e90e6..de308a6f 100644
--- a/src/components/ServiceProject/Jobs.jsx
+++ b/src/components/ServiceProject/Jobs.jsx
@@ -72,11 +72,11 @@ const Jobs = () => {
               >
                 {showArchive ? (
                   <>
-                    <i className="bx bx-list-ul me-1 mt-1"></i> Show Active Jobs
+                    <i className="bx bx-list-ul me-1 mt-1"></i> Show Active
                   </>
                 ) : (
                   <>
-                    <i className="bx bx-archive me-1 mt-1"></i> Show Archived Jobs
+                    <i className="bx bx-archive me-1 mt-1"></i> Show Archived
                   </>
                 )}
               </button>
diff --git a/src/components/ServiceProject/ManageServiceProject.jsx b/src/components/ServiceProject/ManageServiceProject.jsx
index e995b691..f16b18eb 100644
--- a/src/components/ServiceProject/ManageServiceProject.jsx
+++ b/src/components/ServiceProject/ManageServiceProject.jsx
@@ -192,8 +192,8 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
               {...register("statusId")}
             >
               <option>Select Service</option>
-              {PROJECT_STATUS.map((status) => (
-                <option value={status.id}>{status.label}</option>
+              {PROJECT_STATUS?.map((status) => (
+                <option key={status.id} value={status.id}>{status.label}</option>
               ))}
             </select>
             {errors?.statusId && (
diff --git a/src/components/ServiceProject/ServiceProjectBranch/ServiceBranch.jsx b/src/components/ServiceProject/ServiceProjectBranch/ServiceBranch.jsx
index 4e55618a..c1d17365 100644
--- a/src/components/ServiceProject/ServiceProjectBranch/ServiceBranch.jsx
+++ b/src/components/ServiceProject/ServiceProjectBranch/ServiceBranch.jsx
@@ -103,7 +103,7 @@ const ServiceBranch = () => {
                     htmlFor="inactiveEmployeesCheckbox"
                     className="ms-2 text-xs"
                   >
-                    Show Deleted Branches
+                    {!showInactive ? "Show Deleted" : "Hide Deleted"}
                   </label>
                 </div>
                 <div className="d-flex justify-content-end">
diff --git a/src/components/ServiceProject/ServiceProjectJob/ChangeStatus.jsx b/src/components/ServiceProject/ServiceProjectJob/ChangeStatus.jsx
index 935c621d..60d289f9 100644
--- a/src/components/ServiceProject/ServiceProjectJob/ChangeStatus.jsx
+++ b/src/components/ServiceProject/ServiceProjectJob/ChangeStatus.jsx
@@ -31,7 +31,7 @@ const ChangeStatus = ({ statusId, projectId, jobId, popUpId }) => {
   } = methods;
 
   const { mutate: UpdateStatus, isPending } = useUpdateServiceProjectJob(() => {
-    // handleClose();
+    handleClose();
   });
   const onSubmit = (formData) => {
     const payload = 
diff --git a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectCard.jsx b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectCard.jsx
index e6f39b36..21f77a4a 100644
--- a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectCard.jsx
+++ b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectCard.jsx
@@ -26,13 +26,6 @@ const ServiceProjectCard = ({ project, isCore = true }) => {
     const ManageProject = useHasUserPermission(MANAGE_PROJECT);
     const { setMangeProject, setManageServiceProject } = useProjectContext();
 
-    const getProgress = (planned, completed) => {
-        return (completed * 100) / planned + "%";
-    };
-    const getProgressInNumber = (planned, completed) => {
-        return (completed * 100) / planned;
-    };
-
     const handleClose = () => setShowModal(false);
 
     const handleViewProject = () => {
@@ -43,10 +36,6 @@ const ServiceProjectCard = ({ project, isCore = true }) => {
             navigate(`/service-projects/${project.id}`);
         }
     };
-    const handleViewActivities = () => {
-        dispatch(setProjectId(project.id));
-        navigate(`/activities/records?project=${project.id}`);
-    };
     const handleManage = () => {
         if (isCore) {
             setMangeProject({
@@ -68,6 +57,8 @@ const ServiceProjectCard = ({ project, isCore = true }) => {
         DeleteProject(projectId, false);
     };
 
+    
+
     return (
         <>
             <ConfirmModal
@@ -138,14 +129,6 @@ const ServiceProjectCard = ({ project, isCore = true }) => {
                                                 <span className="align-left">Modify</span>
                                             </a>
                                         </li>
-                                        {isCore && (
-                                            <li onClick={handleViewActivities}>
-                                                <a className="dropdown-item">
-                                                    <i className="bx bx-task me-2"></i>
-                                                    <span className="align-left">Activities</span>
-                                                </a>
-                                            </li>
-                                        )}
                                         {!isCore && (
                                             <li
                                                 onClick={() =>
diff --git a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx
new file mode 100644
index 00000000..b86d4939
--- /dev/null
+++ b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectList.jsx
@@ -0,0 +1,209 @@
+import React, { useState } from "react";
+import { MANAGE_PROJECT, PROJECT_STATUS } from "../../../utils/constants";
+import { useProjects } from "../../../hooks/useProjects";
+import { formatNumber, formatUTCToLocalTime } from "../../../utils/dateUtils";
+import ProgressBar from "../../common/ProgressBar";
+import {
+  getProjectStatusColor,
+  getProjectStatusName,
+} from "../../../utils/projectStatus";
+import { useDispatch } from "react-redux";
+import { setProjectId } from "../../../slices/localVariablesSlice";
+import { useNavigate } from "react-router-dom";
+import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
+import { useProjectContext } from "../../../pages/project/ProjectPage";
+import usePagination from "../../../hooks/usePagination";
+import Pagination from "../../common/Pagination";
+
+const ServiceProjectList = ({
+  data,
+  currentPage,
+  totalPages,
+  paginate,
+  isCore = true,
+}) => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const { setMangeProject, setManageServiceProject } = useProjectContext();
+  const handleClose = () => setShowModal(false);
+
+  //   check Permissions
+  const canManageProject = useHasUserPermission(MANAGE_PROJECT);
+
+  const projectColumns = [
+    {
+      key: "projectName",
+      label: "Project Name",
+      className: "text-start py-3",
+      getValue: (p) => (
+        <div
+          className="text-primary cursor-pointer fw-bold py-3"
+          onClick={() => {
+            dispatch(setProjectId(p.id));
+            navigate(`/service-projects/${p.id}`);
+          }}
+        >
+          {p.shortName ? `${p.name} (${p.shortName})` : p.name}
+        </div>
+      ),
+    },
+    {
+      key: "client.contactPerson",
+      label: "Contact Person",
+      className: "text-start small",
+      getValue: (p) => p.client?.contactPerson || "N/A",
+    },
+    {
+      key: "assignedDate",
+      label: "Assign Date",
+      className: "text-center small",
+      getValue: (p) => formatUTCToLocalTime(p.assignedDate),
+    },
+    {
+      key: "status",
+      label: "Status",
+      className: "text-center small",
+      getValue: (p) => (
+        <span className={`badge ${getProjectStatusColor(p.status?.id)}`}>
+          {p.status?.status}
+        </span>
+      ),
+    },
+  ];
+
+  const handleViewProject = (p) => {
+    if (isCore) {
+      dispatch(setProjectId(p.id));
+      navigate(`/projects/details`);
+    } else {
+      navigate(`/service-projects/${p.id}`);
+    }
+  };
+
+  const handleManage = (p) => {
+    if (isCore) {
+      setMangeProject({
+        isOpen: true,
+        Project: p.id,
+      });
+    } else {
+      setManageServiceProject({
+        isOpen: true,
+        project: p.id,
+      });
+    }
+  };
+
+  return (
+    <div>
+      <div className="card page-min-h py-4 px-6 shadow-sm">
+        <div className="table-responsive text-nowrap page-min-h">
+          <table className="table  table-hover align-middle m-0">
+            <thead className="border-bottom ">
+              <tr>
+                {projectColumns.map((col) => (
+                  <th
+                    key={col.key}
+                    colSpan={col.colSpan}
+                    className={`${col.className} table_header_border`}
+                  >
+                    {col.label}
+                  </th>
+                ))}
+                <th className="text-center py-3">Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data?.length > 0 ? (
+                data.map((project) => (
+                  <tr key={project.id}>
+                    {projectColumns.map((col) => (
+                      <td
+                        key={col.key}
+                        colSpan={col.colSpan}
+                        className={`${col.className} py-5`}
+                        style={{ paddingTop: "20px", paddingBottom: "20px" }}
+                      >
+                        {col.getValue
+                          ? col.getValue(project)
+                          : project[col.key] || "N/A"}
+                      </td>
+                    ))}
+                    <td
+                      className={`mx-2 ${
+                        canManageProject ? "d-sm-table-cell" : "d-none"
+                      }`}
+                    >
+                      <div className="dropdown z-2">
+                        <button
+                          type="button"
+                          className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
+                          data-bs-toggle="dropdown"
+                          aria-expanded="false"
+                        >
+                          <i
+                            className="bx bx-dots-vertical-rounded bx-sm text-muted"
+                            data-bs-toggle="tooltip"
+                            data-bs-offset="0,8"
+                            data-bs-placement="top"
+                            data-bs-custom-class="tooltip-dark"
+                            title="More Action"
+                          ></i>
+                        </button>
+                        <ul className="dropdown-menu dropdown-menu-end">
+                          <li>
+                            <a
+                              aria-label="click to View details"
+                              className="dropdown-item"
+                              onClick={() => handleViewProject(project)}
+                            >
+                              <i className="bx bx-detail me-2"></i>
+                              <span className="align-left">View details</span>
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              className="dropdown-item"
+                              onClick={() => handleManage(project)}
+                            >
+                              <i className="bx bx-pencil me-2"></i>
+                              <span className="align-left">Modify</span>
+                            </a>
+                          </li>
+                        </ul>
+                      </div>
+                    </td>
+                  </tr>
+                ))
+              ) : (
+                <tr
+                  className="no-hover"
+                  style={{
+                    pointerEvents: "none",
+                    backgroundColor: "transparent",
+                  }}
+                >
+                  <td
+                    colSpan={projectColumns.length + 1}
+                    className="text-center align-middle"
+                    style={{ height: "300px", borderBottom: "none" }}
+                  >
+                    No Service projects available
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          paginate={paginate}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ServiceProjectList;
diff --git a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectTeamAllocation.jsx b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectTeamAllocation.jsx
index 37005288..e8ef3c36 100644
--- a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectTeamAllocation.jsx
+++ b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectTeamAllocation.jsx
@@ -162,7 +162,7 @@ const ServiceProjectTeamAllocation = () => {
               </div>
               <div className="col-12 d-flex flex-row gap-2 flex-wrap">
                 {selectedEmployees.map((e) => (
-                  <EmployeeChip handleRemove={handleRemove} employee={e} />
+                  <EmployeeChip key={`${e.id}-emp`} handleRemove={handleRemove} employee={e} />
                 ))}
               </div>
             </>
diff --git a/src/components/common/Chips.jsx b/src/components/common/Chips.jsx
index 4b8bd8e3..18972b2d 100644
--- a/src/components/common/Chips.jsx
+++ b/src/components/common/Chips.jsx
@@ -1,45 +1,44 @@
-import React from 'react'
+import React from "react";
 
-export const EmployeeChip = ({handleRemove,employee}) => {
- return(
-         <span
-                  key={employee?.id}
-                  className="tagify__tag d-inline-flex align-items-center me-1 mb-1"
-                  role="listitem"
-                >
-                  <div className="d-flex align-items-center">
-                    {employee?.photo ? (
-                      <span className="tagify__tag__avatar-wrap me-1">
-                        <img
-                          src={employee?.avataremployeerl || "/defaemployeelt-avatar.png"}
-                          alt={`${employee?.firstName || ""} ${employee?.lastName || ""}`}
-                          style={{ width: 12, height: 12, objectFit: "cover" }}
-                        />
-                      </span>
-                    ) : (
-                      <div className="avatar avatar-xs me-2">
-                        <span className="avatar-initial roemployeended-circle bg-label-secondary">
-                          {employee?.firstName?.[0] || ""}
-                          {employee?.lastName?.[0] || ""}
-                        </span>
-                      </div>
-                    )}
+export const EmployeeChip = ({ handleRemove, employee }) => {
+  return (
+    <span
+      key={employee?.id}
+      className="tagify__tag d-inline-flex align-items-center me-1 mb-1"
+      role="listitem"
+    >
+      <div className="d-flex align-items-center">
+        {employee?.photo ? (
+          <span className="tagify__tag__avatar-wrap me-1">
+            <img
+              src={employee?.avataremployeerl || "/defaemployeelt-avatar.png"}
+              alt={`${employee?.firstName || ""} ${employee?.lastName || ""}`}
+              style={{ width: 12, height: 12, objectFit: "cover" }}
+            />
+          </span>
+        ) : (
+          <div className="avatar avatar-xs me-2">
+            <span className="avatar-initial roemployeended-circle bg-label-secondary">
+              {employee?.firstName?.[0] || ""}
+              {employee?.lastName?.[0] || ""}
+            </span>
+          </div>
+        )}
 
-                    <div className="d-flex flex-colemployeemn">
-                      <span className="tagify__tag-text">
-                        {employee?.firstName} {employee?.lastName}
-                      </span>
-                    </div>
-                  </div>
-
-                  <bemployeetton
-                    type="bemployeetton"
-                    className="tagify__tag__removeBtn border-none"
-                    onClick={() => handleRemove(employee?.id)}
-                    aria-label={`Remove ${employee?.firstName}`}
-                    title="Remove"
-                  />
-                </span>
-  )
-}
+        <div className="d-flex flex-colemployeemn">
+          <span className="tagify__tag-text">
+            {employee?.firstName} {employee?.lastName}
+          </span>
+        </div>
+      </div>
 
+      <bemployeetton
+        type="bemployeetton"
+        className="tagify__tag__removeBtn border-none"
+        onClick={() => handleRemove(employee?.id)}
+        aria-label={`Remove ${employee?.firstName}`}
+        title="Remove"
+      />
+    </span>
+  );
+};
diff --git a/src/components/common/ConfirmModal.jsx b/src/components/common/ConfirmModal.jsx
index cc62535b..5a266086 100644
--- a/src/components/common/ConfirmModal.jsx
+++ b/src/components/common/ConfirmModal.jsx
@@ -19,7 +19,9 @@ const ConfirmModal = ({
       case "success":
         return <i className="bx bx-archive-in text-warning" style={{ fontSize: "60px" }}></i>;
       case "archive":
-        return <i className="bx bx-error-circle text-warning" style={{ fontSize: "60px" }}></i>;
+        return <i className="bx bx-archive-in text-warning" style={{ fontSize: "60px" }}></i>;
+      case "Un-archive":
+        return <i className="bx bx-archive-out text-warning" style={{ fontSize: "60px" }}></i>;
         case "undo":
         return <i className="bx bx-undo text-info" style={{ fontSize: "50px" }}></i>;
       default:
diff --git a/src/components/common/Forms/InputSuggesstionField.jsx b/src/components/common/Forms/InputSuggesstionField.jsx
index 9b63ff86..2dd700c0 100644
--- a/src/components/common/Forms/InputSuggesstionField.jsx
+++ b/src/components/common/Forms/InputSuggesstionField.jsx
@@ -14,7 +14,6 @@ const InputSuggessionField = ({
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
-console.log(suggesstionList)
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -61,7 +60,7 @@ console.log(suggesstionList)
 
       {open && !isLoading && (
         <ul
-          className="dropdown-menu w-100 shadow-sm show animate__fadeIn"
+          className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded overflow-x-hidden"
           style={{
             position: "absolute",
             top: "100%",
diff --git a/src/components/common/Forms/SelectFieldServerSide.jsx b/src/components/common/Forms/SelectFieldServerSide.jsx
index 7befef92..47b1d5ad 100644
--- a/src/components/common/Forms/SelectFieldServerSide.jsx
+++ b/src/components/common/Forms/SelectFieldServerSide.jsx
@@ -3,6 +3,7 @@ import Label from "../Label";
 import { useDebounce } from "../../../utils/appUtils";
 import { useEmployeesName } from "../../../hooks/useEmployees";
 import { useProjectBothName } from "../../../hooks/useProjects";
+import EmployeeRepository from "../../../repositories/EmployeeRepository";
 
 const SelectEmployeeServerSide = ({
   label = "Select",
@@ -18,6 +19,7 @@ const SelectEmployeeServerSide = ({
 }) => {
   const [searchText, setSearchText] = useState("");
   const debounce = useDebounce(searchText, 300);
+  const [forcedSelected, setForcedSelected] = useState(null);
 
   const { data, isLoading } = useEmployeesName(
     projectId,
@@ -34,22 +36,15 @@ const SelectEmployeeServerSide = ({
     return `${emp.firstName || ""} ${emp.lastName || ""}`.trim();
   };
 
-  /** -----------------------------
-   * SELECTED OPTION (SINGLE)
-   * ----------------------------- */
   let selectedSingle = null;
-
   if (!isMultiple) {
     if (isFullObject && value) selectedSingle = value;
     else if (!isFullObject && value)
-      selectedSingle = options.find((o) => o[valueKey] === value);
+      selectedSingle =
+        options.find((o) => o[valueKey] === value) || forcedSelected;
   }
 
-  /** -----------------------------
-   * SELECTED OPTION (MULTIPLE)
-   * ----------------------------- */
   let selectedList = [];
-
   if (isMultiple && Array.isArray(value)) {
     if (isFullObject) selectedList = value;
     else {
@@ -57,54 +52,61 @@ const SelectEmployeeServerSide = ({
     }
   }
 
-  /** Main button label */
   const displayText = !isMultiple
     ? getDisplayName(selectedSingle) || placeholder
     : selectedList.length > 0
     ? selectedList.map((e) => getDisplayName(e)).join(", ")
     : placeholder;
 
-  /** -----------------------------
-   * HANDLE OUTSIDE CLICK
-   * ----------------------------- */
   useEffect(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setOpen(false);
       }
     };
-
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
-  /** -----------------------------
-   * HANDLE SELECT
-   * ----------------------------- */
   const handleSelect = (option) => {
     if (!isMultiple) {
-      // SINGLE SELECT
       if (isFullObject) onChange(option);
       else onChange(option[valueKey]);
+      setOpen(false);
     } else {
-      // MULTIPLE SELECT
       let updated = [];
-
       const exists = selectedList.some((e) => e[valueKey] === option[valueKey]);
-
-      if (exists) {
-        // remove
-        updated = selectedList.filter((e) => e[valueKey] !== option[valueKey]);
-      } else {
-        // add
-        updated = [...selectedList, option];
-      }
-
+      updated = exists
+        ? selectedList.filter((e) => e[valueKey] !== option[valueKey])
+        : [...selectedList, option];
       if (isFullObject) onChange(updated);
       else onChange(updated.map((x) => x[valueKey]));
     }
   };
 
+  useEffect(() => {
+    if (!value || isFullObject) return;
+
+    const exists = options.some((o) => o[valueKey] === value);
+    if (exists) return;
+
+    const loadSingleEmployee = async () => {
+      try {
+        const emp = await EmployeeRepository.getEmployeeName(
+          null,
+          null,
+          true,
+          value
+        );
+        setForcedSelected(emp.data[0]);
+      } catch (err) {
+        console.error("Failed to load selected employee", err);
+      }
+    };
+
+    loadSingleEmployee();
+  }, [value, options, isFullObject, valueKey]);
+
   return (
     <div className="mb-3 position-relative" ref={dropdownRef}>
       {label && (
@@ -126,7 +128,6 @@ const SelectEmployeeServerSide = ({
         </span>
       </button>
 
-      {/* DROPDOWN */}
       {open && (
         <ul
           className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded"
@@ -137,10 +138,10 @@ const SelectEmployeeServerSide = ({
             zIndex: 1050,
             marginTop: "4px",
             borderRadius: "0.375rem",
-            overflow: "hidden",
+            padding: 0,
           }}
         >
-          <div className="p-1">
+          <li className="p-1 sticky-top bg-white" style={{ zIndex: 10 }}>
             <input
               type="search"
               value={searchText}
@@ -148,7 +149,7 @@ const SelectEmployeeServerSide = ({
               className="form-control form-control-sm"
               placeholder="Search..."
             />
-          </div>
+          </li>
 
           {isLoading && (
             <li className="dropdown-item text-muted text-center">Loading...</li>
@@ -168,10 +169,12 @@ const SelectEmployeeServerSide = ({
                   selectedSingle[valueKey] === option[valueKey];
 
               return (
-                <li key={option[valueKey]}>
+                <li key={option[valueKey]} className="px-1 rounded">
                   <button
                     type="button"
-                    className={`dropdown-item ${isActive ? "active" : ""}`}
+                    className={`dropdown-item rounded ${
+                      isActive ? "active" : ""
+                    }`}
                     onClick={() => handleSelect(option)}
                   >
                     {getDisplayName(option)}
@@ -184,6 +187,7 @@ const SelectEmployeeServerSide = ({
     </div>
   );
 };
+
 export default SelectEmployeeServerSide;
 
 export const SelectProjectField = ({
@@ -196,6 +200,7 @@ export const SelectProjectField = ({
   isFullObject = false,
   isMultiple = false,
   isAllProject = false,
+  disabled
 }) => {
   const [searchText, setSearchText] = useState("");
   const debounce = useDebounce(searchText, 300);
@@ -211,9 +216,6 @@ export const SelectProjectField = ({
     return `${project.name || ""}`.trim();
   };
 
-  /** -----------------------------
-   * SELECTED OPTION (SINGLE)
-   * ----------------------------- */
   let selectedSingle = null;
 
   if (!isMultiple) {
@@ -222,9 +224,6 @@ export const SelectProjectField = ({
       selectedSingle = options.find((o) => o[valueKey] === value);
   }
 
-  /** -----------------------------
-   * SELECTED OPTION (MULTIPLE)
-   * ----------------------------- */
   let selectedList = [];
 
   if (isMultiple && Array.isArray(value)) {
@@ -297,6 +296,7 @@ export const SelectProjectField = ({
           open ? "show" : ""
         }`}
         onClick={() => setOpen((prev) => !prev)}
+        disabled={disabled}
       >
         <span className={`text-truncate ${!displayText ? "text-muted" : ""}`}>
           {displayText}
@@ -345,10 +345,12 @@ export const SelectProjectField = ({
                   selectedSingle[valueKey] === option[valueKey];
 
               return (
-                <li key={option[valueKey]}>
+                <li key={option[valueKey]} className="px-1 rounded w-full">
                   <button
                     type="button"
-                    className={`dropdown-item ${isActive ? "active" : ""}`}
+                    className={`dropdown-item rounded d-block text-truncate w-100  ${
+                      isActive ? "active" : ""
+                    }`}
                     onClick={() => handleSelect(option)}
                   >
                     {getDisplayName(option)}
@@ -514,7 +516,7 @@ export const SelectFieldSearch = ({
       {/* DROPDOWN */}
       {open && (
         <ul
-          className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded"
+          className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded overflow-x-hidden"
           style={{
             position: "absolute",
             top: "100%",
diff --git a/src/hooks/useEmployees.js b/src/hooks/useEmployees.js
index cb87c39b..ae0e5f45 100644
--- a/src/hooks/useEmployees.js
+++ b/src/hooks/useEmployees.js
@@ -231,7 +231,7 @@ export const useEmployeesName = (projectId, search, allEmployee) => {
     queryFn: async () =>
       await EmployeeRepository.getEmployeeName(projectId, search, allEmployee),
 
-    staleTime: 5 * 60 * 1000, // Optional: cache for 5 minutes
+    staleTime: 5 * 60 * 1000,
   });
 };
 
diff --git a/src/hooks/useProjects.js b/src/hooks/useProjects.js
index 75467399..973d8b94 100644
--- a/src/hooks/useProjects.js
+++ b/src/hooks/useProjects.js
@@ -20,14 +20,15 @@ export const useCurrentService = () => {
 
 // ------------------------------Query-------------------
 
-export const useProjects = (pageSize, pageNumber) => {
+export const useProjects = (pageSize, pageNumber,searchString) => {
   const loggedUser = useSelector((store) => store.globalVariables.loginUser);
   return useQuery({
-    queryKey: ["ProjectsList", pageSize, pageNumber],
+    queryKey: ["ProjectsList", pageSize, pageNumber,searchString],
     queryFn: async () => {
       const response = await ProjectRepository.getProjectList(
         pageSize,
-        pageNumber
+        pageNumber,
+        searchString,
       );
       return response?.data;
     },
diff --git a/src/hooks/useServiceProject.jsx b/src/hooks/useServiceProject.jsx
index 82bc5713..9319181a 100644
--- a/src/hooks/useServiceProject.jsx
+++ b/src/hooks/useServiceProject.jsx
@@ -8,13 +8,14 @@ import { ServiceProjectRepository } from "../repositories/ServiceProjectReposito
 import showToast from "../services/toastService";
 
 //#region Service Project
-export const useServiceProjects = (pageSize, pageNumber) => {
+export const useServiceProjects = (pageSize, pageNumber, searchString) => {
   return useQuery({
-    queryKey: ["serviceProjects", pageSize, pageNumber],
+    queryKey: ["serviceProjects", pageSize, pageNumber, searchString],
     queryFn: async () => {
       const response = await ServiceProjectRepository.GetServiceProjects(
         pageSize,
-        pageNumber
+        pageNumber,
+        searchString
       );
       return response.data;
     },
diff --git a/src/pages/ServiceProject/ServiceProjectDisplay.jsx b/src/pages/ServiceProject/ServiceProjectDisplay.jsx
index 1d59f1f2..6bb9299d 100644
--- a/src/pages/ServiceProject/ServiceProjectDisplay.jsx
+++ b/src/pages/ServiceProject/ServiceProjectDisplay.jsx
@@ -11,14 +11,18 @@ import GlobalModel from "../../components/common/GlobalModel";
 import ManageServiceProject from "../../components/ServiceProject/ManageServiceProject";
 import { SpinnerLoader } from "../../components/common/Loader";
 import ServiceProjectCard from "../../components/ServiceProject/ServiceProjectTeam/ServiceProjectCard";
+import ServiceProjectList from "../../components/ServiceProject/ServiceProjectTeam/ServiceProjectList";
+import { useDebounce } from "../../utils/appUtils";
 
-const ServiceProjectDisplay = ({ listView ,selectedStatuses }) => {
+const ServiceProjectDisplay = ({ listView, selectedStatuses, searchTerm }) => {
   const [currentPage, setCurrentPage] = useState(1);
 
   const { manageServiceProject, setManageServiceProject } = useProjectContext();
+  const debouncedSearch = useDebounce(searchTerm, 500);
   const { data, isLoading, isError, error } = useServiceProjects(
     ITEMS_PER_PAGE,
-    currentPage
+    currentPage,
+    debouncedSearch
   );
   const paginate = (page) => {
     if (page >= 1 && page <= (data?.totalPages ?? 1)) {
@@ -47,15 +51,20 @@ const ServiceProjectDisplay = ({ listView ,selectedStatuses }) => {
       </div>
     );
   return (
-    <div className="row">
+    <div className="">
+      <div className="row">
       {listView ? (
-        <p>List</p>
-      ) : (
+        <ServiceProjectList data={filteredProjects}
+          currentPage={currentPage}
+          totalPages={data?.totalPages}
+          paginate={paginate}
+          isCore={false} />
+      ) :  filteredProjects?.length > 0 ? (
         filteredProjects?.map((project) => (
           <ServiceProjectCard key={project.id} project={project} isCore={false} />
         ))
-
-      )}
+        
+      ):(<div className="d-flex justify-content-center align-items-center page-min-h "><p>No Service projects available</p></div>)}
 
       <div className="col-12 d-flex justify-content-start mt-3">
         <Pagination
@@ -82,6 +91,7 @@ const ServiceProjectDisplay = ({ listView ,selectedStatuses }) => {
         </GlobalModel>
       )}
     </div>
+    </div>
   );
 };
 
diff --git a/src/pages/collections/CollectionPage.jsx b/src/pages/collections/CollectionPage.jsx
index 5469be62..32324133 100644
--- a/src/pages/collections/CollectionPage.jsx
+++ b/src/pages/collections/CollectionPage.jsx
@@ -116,22 +116,23 @@ const CollectionPage = () => {
         />
 
         <div className="card my-3 py-2 px-sm-4 px-2">
-          <div className="row align-items-center mx-0">
-            {/* Left side: Date Picker + Show Pending (stacked on mobile) */}
-            <div className="col-12 col-md-6 d-flex flex-column flex-md-row flex-wrap align-items-start">
+          <div className="row align-items-center gap-sm-2 gap-md-0 mx-0">
+            <div className="col-12 col-md-4 d-flex flex-column flex-md-row flex-wrap align-items-start">
               <div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
                 <button
                   type="button"
-                  className={`btn px-2 py-1 rounded-0 text-tiny ${!showPending ? "btn-primary text-white" : ""
-                    }`}
+                  className={`btn px-2 py-1 rounded-0 text-tiny ${
+                    !showPending ? "btn-primary text-white" : ""
+                  }`}
                   onClick={() => setShowPending(false)}
                 >
-                 Show All
+                  Show All
                 </button>
                 <button
                   type="button"
-                  className={`btn px-2 py-1 rounded-0 text-tiny ${showPending ? "btn-primary text-white" : ""
-                    }`}
+                  className={`btn px-2 py-1 rounded-0 text-tiny ${
+                    showPending ? "btn-primary text-white" : ""
+                  }`}
                   onClick={() => setShowPending(true)}
                 >
                   Pending
@@ -139,34 +140,36 @@ const CollectionPage = () => {
               </div>
             </div>
 
-            {/* Right side: Search + Add Button */}
-            <div className="col-12 col-sm-6 d-flex justify-content-end align-items-center gap-2">
-              <FormProvider {...methods}>
-                <DateRangePicker1 howManyDay={180} startField="fromDate"
-                  endField="toDate" />
-              </FormProvider>
+            <div className="col-12 col-sm-8 d-block d-sm-flex justify-content-end ga-2  align-items-center gap-2">
               <input
                 type="search"
                 value={searchText}
                 onChange={(e) => setSearchText(e.target.value)}
                 placeholder="Search Collection"
-                className="form-control form-control-sm w-auto"
+                className="form-control form-control-sm   mt-2 mt-sm-0"
               />
+              <div className="d-flex justify-content-between justify-content-sm-between mt-2 mt-sm-0">
+                <FormProvider {...methods} className="me-3">
+                  <DateRangePicker1
+                    howManyDay={180}
+                    startField="fromDate"
+                    endField="toDate"
+                  />
+                </FormProvider>
 
-              {(canCreate || isAdmin) && (
-                <button
-                  className="btn btn-sm btn-primary"
-                  type="button"
-                  onClick={() =>
-                    setCollection({ isOpen: true, invoiceId: null })
-                  }
-                >
-                  <i className="bx bx-plus-circle me-2"></i>
-                  <span className="d-none d-md-inline-block">
-                    Add New Collection
-                  </span>
-                </button>
-              )}
+                {(canCreate || isAdmin) && (
+                  <button
+                    className="btn btn-sm btn-primary ms-sm-2"
+                    type="button"
+                    onClick={() =>
+                      setCollection({ isOpen: true, invoiceId: null })
+                    }
+                  >
+                    <i className="bx bx-plus-circle me-2"></i>
+                    <span className="d-none d-md-inline-block">Collection</span>
+                  </button>
+                )}
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/pages/project/ProjectPage.jsx b/src/pages/project/ProjectPage.jsx
index d9557f48..f72b995c 100644
--- a/src/pages/project/ProjectPage.jsx
+++ b/src/pages/project/ProjectPage.jsx
@@ -41,10 +41,11 @@ const ProjectPage = () => {
   const [listView, setListView] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [coreProjects, setCoreProjects] = useState(() => {
-    const storedValue = sessionStorage.getItem('whichProjectDisplay');
-    return storedValue === 'true';
+    const storedValue = sessionStorage.getItem("whichProjectDisplay");
+    return storedValue === "true";
   });
   const HasManageProject = useHasUserPermission(MANAGE_PROJECT);
+  const [currentPage, setCurrentPage] = useState(1);
 
   const [selectedStatuses, setSelectedStatuses] = useState(
     PROJECT_STATUS.map((s) => s.id)
@@ -64,13 +65,11 @@ const ProjectPage = () => {
     manageServiceProject,
   };
 
-
   const handleToggleProject = (value) => {
     setCoreProjects(value);
     sessionStorage.setItem("whichProjectDisplay", String(value));
   };
 
-
   return (
     <ProjectContext.Provider value={contextDispatcher}>
       <div className="container-fluid">
@@ -90,8 +89,9 @@ const ProjectPage = () => {
                   {/* Service Project Button */}
                   <button
                     type="button"
-                    className={`btn px-2 py-1 rounded-0 text-tiny ${!coreProjects ? "btn-primary text-white" : ""
-                      }`}
+                    className={`btn px-2 py-1 rounded-0 text-tiny ${
+                      !coreProjects ? "btn-primary text-white" : ""
+                    }`}
                     onClick={() => handleToggleProject(false)}
                   >
                     Service Project
@@ -99,20 +99,18 @@ const ProjectPage = () => {
                   {/* Organization Project Button */}
                   <button
                     type="button"
-                    className={`btn px-2 py-1 rounded-0 text-tiny ${coreProjects ? "btn-primary text-white" : ""
-                      }`}
+                    className={`btn px-2 py-1 rounded-0 text-tiny ${
+                      coreProjects ? "btn-primary text-white" : ""
+                    }`}
                     onClick={() => handleToggleProject(true)}
                   >
                     Infra Project
                   </button>
-
                 </div>
               </div>
 
-
               {/* RIGHT SIDE — SEARCH + CARD/LIST + DROPDOWN */}
               <div className="d-flex flex-wrap align-items-center justify-content-end">
-
                 {/* Search */}
                 <div className="me-2" style={{ minWidth: "200px" }}>
                   <input
@@ -131,7 +129,9 @@ const ProjectPage = () => {
                 <div className="d-flex gap-2">
                   <button
                     type="button"
-                    className={`btn btn-sm p-1 ${!listView ? "btn-primary" : "btn-outline-primary"}`}
+                    className={`btn btn-sm p-1 ${
+                      !listView ? "btn-primary" : "btn-outline-primary"
+                    }`}
                     onClick={() => setListView(false)}
                     title="Card View"
                   >
@@ -140,7 +140,9 @@ const ProjectPage = () => {
 
                   <button
                     type="button"
-                    className={`btn btn-sm p-1 ${listView ? "btn-primary" : "btn-outline-primary"}`}
+                    className={`btn btn-sm p-1 ${
+                      listView ? "btn-primary" : "btn-outline-primary"
+                    }`}
                     onClick={() => setListView(true)}
                     title="List View"
                   >
@@ -180,10 +182,14 @@ const ProjectPage = () => {
                   <button
                     type="button"
                     className="btn btn-primary btn-sm d-flex align-items-center my-2"
-                    onClick={() =>
-                      coreProjects
-                        ? setMangeProject({ isOpen: true, Project: null })      // Organization Project → Infra
-                        : setManageServiceProject({ isOpen: true, Project: null }) // Service Project
+                    onClick={
+                      () =>
+                        coreProjects
+                          ? setMangeProject({ isOpen: true, Project: null }) // Organization Project → Infra
+                          : setManageServiceProject({
+                              isOpen: true,
+                              Project: null,
+                            }) // Service Project
                     }
                   >
                     <i className="bx bx-plus-circle me-2"></i>
@@ -195,11 +201,22 @@ const ProjectPage = () => {
           </div>
         </div>
 
-        {coreProjects ? <ProjectsDisplay listView={listView}
-          searchTerm={searchTerm}
-          selectedStatuses={selectedStatuses}
-          handleStatusChange={handleStatusChange} /> : <ServiceProjectDisplay listView={listView}
-            selectedStatuses={selectedStatuses} />}
+        {coreProjects ? (
+          <ProjectsDisplay
+            listView={listView}
+            searchTerm={searchTerm}
+            selectedStatuses={selectedStatuses}
+            handleStatusChange={handleStatusChange}
+            currentPage={currentPage}
+            setCurrentPage={setCurrentPage}
+          />
+        ) : (
+          <ServiceProjectDisplay
+            listView={listView}
+            searchTerm={searchTerm}
+            selectedStatuses={selectedStatuses}
+          />
+        )}
       </div>
     </ProjectContext.Provider>
   );
diff --git a/src/pages/project/ProjectsDisplay.jsx b/src/pages/project/ProjectsDisplay.jsx
index db3deaec..d01228c8 100644
--- a/src/pages/project/ProjectsDisplay.jsx
+++ b/src/pages/project/ProjectsDisplay.jsx
@@ -10,6 +10,7 @@ import { useServiceProjects } from "../../hooks/useServiceProject";
 import { ITEMS_PER_PAGE, PROJECT_STATUS } from "../../utils/constants";
 import usePagination from "../../hooks/usePagination";
 import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
+import { useDebounce } from "../../utils/appUtils";
 
 const ProjectsDisplay = ({
   listView,
@@ -26,8 +27,8 @@ const ProjectsDisplay = ({
   } = useProjectContext();
 
   const [projectList, setProjectList] = useState([]);
-
-  const { data, isLoading, isError, error } = useProjects(ITEMS_PER_PAGE, 1);
+  const debouncedSearch = useDebounce(searchTerm, 500);
+  const { data, isLoading, isError, error } = useProjects(ITEMS_PER_PAGE, 1, debouncedSearch);
 
   const filteredProjects =
     data?.data?.filter((project) => {
@@ -98,7 +99,7 @@ const ProjectsDisplay = ({
     );
 
   return (
-    <div className="row">
+    <div className="">
       {listView ? (
         <ProjectListView
           data={projectList}
diff --git a/src/repositories/EmployeeRepository.jsx b/src/repositories/EmployeeRepository.jsx
index da51038c..256186b7 100644
--- a/src/repositories/EmployeeRepository.jsx
+++ b/src/repositories/EmployeeRepository.jsx
@@ -11,12 +11,13 @@ const EmployeeRepository = {
   // deleteEmployee: ( id ) => api.delete( `/users/${ id }` ),
   getEmployeeProfile: (id) => api.get(`/api/employee/profile/get/${id}`),
   deleteEmployee: (id, active) => api.delete(`/api/employee/${id}?active=${active}`),
-  getEmployeeName: (projectId, search, allEmployee) => {
+  getEmployeeName: (projectId, search, allEmployee,employeeId) => {
     const params = new URLSearchParams();
 
     if (projectId) params.append("projectId", projectId);
     if (search) params.append("searchString", search);
-    if (allEmployee) params.append("allEmployee", allEmployee)
+    if (allEmployee) params.append("allEmployee", allEmployee);
+    if (employeeId) params.append("employeeId", employeeId);
 
     const query = params.toString();
     return api.get(`/api/Employee/basic${query ? `?${query}` : ""}`);
diff --git a/src/repositories/ProjectRepository.jsx b/src/repositories/ProjectRepository.jsx
index 9894feae..6759b885 100644
--- a/src/repositories/ProjectRepository.jsx
+++ b/src/repositories/ProjectRepository.jsx
@@ -2,8 +2,8 @@ import { api } from "../utils/axiosClient";
 
 const ProjectRepository = {
 
-  getProjectList: (pageSize, pageNumber) =>
-    api.get(`/api/project/list?pageSize=${pageSize}&pageNumber=${pageNumber}`),
+  getProjectList: (pageSize, pageNumber,searchString) =>
+    api.get(`/api/project/list?pageSize=${pageSize}&pageNumber=${pageNumber}&searchString=${searchString}`),
   getProjectByprojectId: (projetid) =>
     api.get(`/api/project/details/${projetid}`),
 
diff --git a/src/repositories/ServiceProjectRepository.jsx b/src/repositories/ServiceProjectRepository.jsx
index f043bcc0..ff3b9d3b 100644
--- a/src/repositories/ServiceProjectRepository.jsx
+++ b/src/repositories/ServiceProjectRepository.jsx
@@ -4,9 +4,9 @@ import { api } from "../utils/axiosClient";
 export const ServiceProjectRepository = {
   //#region Service Project
   CreateServiceProject: (data) => api.post("/api/ServiceProject/create", data),
-  GetServiceProjects: (pageSize, pageNumber) =>
+  GetServiceProjects: (pageSize, pageNumber,searchString) =>
     api.get(
-      `/api/ServiceProject/list?pageSize=${pageSize}&pageNumber=${pageNumber}`
+      `/api/ServiceProject/list?pageSize=${pageSize}&pageNumber=${pageNumber}&searchString=${searchString}`
     ),
   GetServiceProject: (id) => api.get(`/api/ServiceProject/details/${id}`),
   UpdateServiceProject: (id, data) =>