diff --git a/src/components/Activities/AttendcesLogs.jsx b/src/components/Activities/AttendcesLogs.jsx
index 465dc341..31c1522f 100644
--- a/src/components/Activities/AttendcesLogs.jsx
+++ b/src/components/Activities/AttendcesLogs.jsx
@@ -132,9 +132,12 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
   }, [showPending]);
 
 
-  useEffect(() => {
+ useEffect(() => {
+  if (data?.length) {
     filtering(data);
-  }, [data, showPending]);
+  }
+}, [data, showPending]);
+
 
   // New useEffect to handle search filtering
   const filteredSearchData = useMemo(() => {
@@ -148,31 +151,6 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
     });
   }, [processedData, searchTerm]);
 
-  //   const filteredSearchData = useMemo(() => {
-  //   let tempData = processedData;
-
-  //   if (searchTerm) {
-  //     const lowercasedSearchTerm = searchTerm.toLowerCase();
-  //     tempData = tempData.filter((item) => {
-  //       const fullName = `${item.firstName} ${item.lastName}`.toLowerCase();
-  //       return fullName.includes(lowercasedSearchTerm);
-  //     });
-  //   }
-
-  //   if (filters?.selectedOrganization) {
-  //     tempData = tempData.filter(
-  //       (item) => item.organization?.name === filters.selectedOrganization
-  //     );
-  //   }
-
-  //   if (filters?.selectedServices?.length > 0) {
-  //     tempData = tempData.filter((item) =>
-  //       filters.selectedServices.includes(item.service?.name)
-  //     );
-  //   }
-
-  //   return tempData;
-  // }, [processedData, searchTerm, filters]);
 
 
   const {
@@ -250,12 +228,12 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
         className="dataTables_length text-start py-2 d-flex justify-content-between"
         id="DataTables_Table_0_length"
       >
-        <div className="d-flex align-items-center my-0 ">
+          <div className="d-flex align-items-center my-0 ms-sm-8 ">
           <DateRangePicker
             onRangeChange={setDateRange}
             defaultStartDate={yesterday}
           />
-          <div className="form-check form-switch text-start m-0 ms-5">
+          <div className="form-check form-switch text-start ms-1 ms-md-5 align-items-center mb-0">
             <input
               type="checkbox"
               className="form-check-input"
@@ -270,9 +248,9 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
         </div>
 
       </div>
-      <div className="table-responsive text-nowrap" style={{ minHeight: "200px" }}>
+      <div className="table-responsive text-nowrap " >
         {isLoading ? (
-          <div className="d-flex justify-content-center align-items-center" style={{ height: "200px" }}>
+          <div className="d-flex justify-content-center align-items-center">
             <p className="text-secondary">Loading...</p>
           </div>
         ) : filteredSearchData?.length > 0 ? (
@@ -370,7 +348,7 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
             </tbody>
           </table>
         ) : (
-          <div className="my-12"><span className="text-secondary">No data available for the selected date range. Please Select another date.</span></div>
+          <div className="my-12"><span className="text-secondary">No data for this date range. Please choose another.</span></div>
         )}
       </div>
       {paginatedAttendances?.length == 0 && filteredSearchData?.length > 0 && (
diff --git a/src/components/Activities/CheckCheckOutForm.jsx b/src/components/Activities/CheckCheckOutForm.jsx
index 3d7c5e0e..830c8db0 100644
--- a/src/components/Activities/CheckCheckOutForm.jsx
+++ b/src/components/Activities/CheckCheckOutForm.jsx
@@ -110,8 +110,8 @@ const CheckInCheckOut = ({ modeldata, closeModal, handleSubmitForm }) => {
   }, [projectNames, projectId, loading]);
 
   return (
-    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
-      <div className="col-12 d-flex justify-content-center">
+    <form className="row p-2" onSubmit={handleSubmit(onSubmit)}>
+      <div className="col-12 d-flex justify-content-center mt-2">
         <label className="fs-5 text-dark text-center">
           {modeldata?.checkInTime && !modeldata?.checkOutTime
             ? `Check out for ${currentProject?.name}`
@@ -220,7 +220,7 @@ export const Regularization = ({ modeldata, closeModal, handleSubmitForm }) => {
   };
 
   return (
-    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+    <form className="row " onSubmit={handleSubmit(onSubmit)}>
       <div className="col-12 col-md-12">
         <p>Regularize Attendance</p>
         <label className="form-label" htmlFor="description">
diff --git a/src/components/Dashboard/ExpenseAnalysis.jsx b/src/components/Dashboard/ExpenseAnalysis.jsx
index 283e64c8..50528055 100644
--- a/src/components/Dashboard/ExpenseAnalysis.jsx
+++ b/src/components/Dashboard/ExpenseAnalysis.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo } from "react";
 import Chart from "react-apexcharts";
 import { useExpenseAnalysis } from "../../hooks/useDashboard_Data";
 import { useSelectedProject } from "../../slices/apiDataManager";
@@ -10,36 +10,27 @@ const ExpenseAnalysis = () => {
   const projectId = useSelectedProject();
 
   const methods = useForm({
-    defaultValues: {
-      startDate: "",
-      endDate: "",
-    },
+    defaultValues: { startDate: "", endDate: "" },
   });
 
   const { watch } = methods;
-
-
   const [startDate, endDate] = watch(["startDate", "endDate"]);
+
   const { data, isLoading, isError, error, isFetching } = useExpenseAnalysis(
-  projectId,
-  startDate ? localToUtc(startDate) : null,
-  endDate ? localToUtc(endDate) : null
+    projectId,
+    startDate ? localToUtc(startDate) : null,
+    endDate ? localToUtc(endDate) : null
   );
 
   if (isError) return <div>{error.message}</div>;
 
-
-
-
   const report = data?.report ?? [];
-
-const { labels, series, total } = useMemo(() => {
-  const labels = report.map((item) => item.projectName);
-  const series = report.map((item) => item.totalApprovedAmount || 0);
-  const total = formatCurrency(data?.totalAmount || 0);
-
-  return { labels, series, total };
-}, [report, data?.totalAmount]);
+  const { labels, series, total } = useMemo(() => {
+    const labels = report.map((item) => item.projectName);
+    const series = report.map((item) => item.totalApprovedAmount || 0);
+    const total = formatCurrency(data?.totalAmount || 0);
+    return { labels, series, total };
+  }, [report, data?.totalAmount]);
 
   const donutOptions = {
     chart: { type: "donut" },
@@ -63,26 +54,34 @@ const { labels, series, total } = useMemo(() => {
         },
       },
     },
+    responsive: [
+      {
+        breakpoint: 576, // mobile breakpoint
+        options: {
+          chart: { width: "100%" },
+        },
+      },
+    ],
   };
 
-
   return (
     <>
-      <div className="card-header d-flex justify-content-between  align-items-center ">
-        <div>
-          <h5 className="mb-1 card-title text-start">Expense Breakdown</h5>
-          <p className="card-subtitle">Category Wise Expense Breakdown</p>
+      {/* Header */}
+      <div className="card-header d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-2">
+        <div className="text-start w-100">
+          <h5 className="mb-1 card-title">Expense Breakdown</h5>
+          <p className="card-subtitle mb-0">Category Wise Expense Breakdown</p>
         </div>
 
-        <div className="text-end">
+        <div className="text-start text-sm-end w-75">
           <FormProvider {...methods}>
             <DateRangePicker1 />
           </FormProvider>
         </div>
       </div>
 
+      {/* Card body */}
       <div className="card-body position-relative">
-        {/* Initial loading: show full loader */}
         {isLoading && (
           <div
             className="d-flex justify-content-center align-items-center"
@@ -92,14 +91,12 @@ const { labels, series, total } = useMemo(() => {
           </div>
         )}
 
-        {/* Data display */}
         {!isLoading && report.length === 0 && (
-          <div className="text-center py-5 text-muted ">No data found</div>
+          <div className="text-center py-5 text-muted">No data found</div>
         )}
 
         {!isLoading && report.length > 0 && (
           <>
-            {/* Overlay spinner for refetch */}
             {isFetching && (
               <div className="position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center bg-white bg-opacity-75">
                 <span>Loading...</span>
@@ -109,17 +106,18 @@ const { labels, series, total } = useMemo(() => {
             <div className="d-flex justify-content-center mb-3">
               <Chart
                 options={donutOptions}
-                series={report.map((item) => item.totalApprovedAmount || 0)}
+                series={series}
                 type="donut"
-                width="320"
+                width="100%"
+                height={320}
               />
             </div>
 
             <div className="mb-2 w-100">
-              <div className="row">
+              <div className="row g-2">
                 {report.map((item, idx) => (
                   <div
-                    className="col-6 d-flex justify-content-start align-items-start mb-2"
+                    className="col-12 col-sm-6 d-flex align-items-start"
                     key={idx}
                   >
                     <div className="avatar me-2">
@@ -127,16 +125,14 @@ const { labels, series, total } = useMemo(() => {
                         className="avatar-initial rounded-2"
                         style={{
                           backgroundColor:
-                            donutOptions.colors[
-                              idx % donutOptions.colors.length
-                            ],
+                            donutOptions.colors[idx % donutOptions.colors.length],
                         }}
                       >
                         <i className="bx bx-receipt fs-4"></i>
                       </span>
                     </div>
                     <div className="d-flex flex-column gap-1 text-start">
-                      <small className="fw-semibold ">{item.projectName}</small>
+                      <small className="fw-semibold">{item.projectName}</small>
                       <span className="fw-semibold text-muted ms-1">
                         {formatCurrency(item.totalApprovedAmount)}
                       </span>
diff --git a/src/components/Dashboard/ExpenseByProject.jsx b/src/components/Dashboard/ExpenseByProject.jsx
index c0189306..819824ca 100644
--- a/src/components/Dashboard/ExpenseByProject.jsx
+++ b/src/components/Dashboard/ExpenseByProject.jsx
@@ -113,7 +113,7 @@ const ExpenseByProject = () => {
         </div>
 
         {/* Range Buttons + Expense Dropdown */}
-        <div className="d-flex align-items-center flex-wrap">
+        <div className="d-flex align-items-center flex-wrap ">
           {["1M", "3M", "6M", "12M", "All"].map((item) => (
             <button
               key={item}
@@ -129,7 +129,7 @@ const ExpenseByProject = () => {
           ))}
           {viewMode === "Category" && (
             <select
-              className="form-select form-select-sm ms-auto mb-3"
+              className="form-select form-select-sm ms-auto mb-3 mt-1 mt-sm-0"
               value={selectedType}
               onChange={(e) => setSelectedType(e.target.value)}
               disabled={typeLoading}
diff --git a/src/components/Project/ProjectListView.jsx b/src/components/Project/ProjectListView.jsx
index fb81428f..0c1a5c41 100644
--- a/src/components/Project/ProjectListView.jsx
+++ b/src/components/Project/ProjectListView.jsx
@@ -131,148 +131,149 @@ const ProjectListView = ({
 
   const handleMoveDetails = (project) => {
     dispatch(setProjectId(project));
-    localStorage.setItem("lastActiveProjectTab","profile")
+    localStorage.setItem("lastActiveProjectTab", "profile")
     navigate("/projects/details");
   };
   return (
     <div className="card page-min-h py-4 px-6 shadow-sm">
-      <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}>
-                {col.label}
-              </th>
-            ))}
-            <th className="text-center py-3">Action</th>
-          </tr>
-        </thead>
-        <tbody>
-          {currentItems?.map((project) => (
-            <tr key={project.id}>
+      <div className="table-responsive text-nowrap">
+        <table className="table  table-hover align-middle m-0">
+          <thead className="border-bottom">
+            <tr>
               {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>
+                <th key={col.key} colSpan={col.colSpan} className={col.className}>
+                  {col.label}
+                </th>
               ))}
-              <td className={`mx-2 ${"d-sm-table-cell"}`}>
-                <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"
+              <th className="text-center py-3">Action</th>
+            </tr>
+          </thead>
+          <tbody>
+            {currentItems?.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 onClick={() => handleMoveDetails(project.id)}>
-                      <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 ${"d-sm-table-cell"}`}>
+                  <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 onClick={() => handleMoveDetails(project.id)}>
+                        <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)}>
+                      <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>
-          ))}
-        </tbody>
-      </table>
+                    </ul>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
 
-      {isLoading && (
-        <div className="py-4">
-          {" "}
-          {isLoading && <p className="text-center">Loading...</p>}
-          {!isLoading && filteredProjects.length === 0 && (
+        {isLoading && (
+          <div className="py-4">
+            {" "}
+            {isLoading && <p className="text-center">Loading...</p>}
+            {!isLoading && filteredProjects.length === 0 && (
+              <p className="text-center text-muted">No projects found.</p>
+            )}
+          </div>
+        )}
+        {!isLoading && currentItems.length === 0 && (
+          <div className="py-6">
             <p className="text-center text-muted">No projects found.</p>
-          )}
-        </div>
-      )}
-      {!isLoading && currentItems.length === 0 && (
-        <div className="py-6">
-          <p className="text-center text-muted">No projects found.</p>
-        </div>
-      )}
-      {!isLoading && totalPages > 1 && (
-        <nav>
-          <ul className="pagination pagination-sm justify-content-end py-2">
-            <li className={`page-item ${currentPage === 1 && "disabled"}`}>
-              <button
-                className="page-link"
-                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
-              >
-                &laquo;
-              </button>
-            </li>
-            {[...Array(totalPages)].map((_, i) => (
+          </div>
+        )}
+        {!isLoading && totalPages > 1 && (
+          <nav>
+            <ul className="pagination pagination-sm justify-content-end py-2">
+              <li className={`page-item ${currentPage === 1 && "disabled"}`}>
+                <button
+                  className="page-link"
+                  onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                >
+                  &laquo;
+                </button>
+              </li>
+              {[...Array(totalPages)].map((_, i) => (
+                <li
+                  key={i}
+                  className={`page-item ${currentPage === i + 1 && "active"}`}
+                >
+                  <button
+                    className="page-link"
+                    onClick={() => setCurrentPage(i + 1)}
+                  >
+                    {i + 1}
+                  </button>
+                </li>
+              ))}
               <li
-                key={i}
-                className={`page-item ${currentPage === i + 1 && "active"}`}
+                className={`page-item ${currentPage === totalPages && "disabled"
+                  }`}
               >
                 <button
                   className="page-link"
-                  onClick={() => setCurrentPage(i + 1)}
+                  onClick={() =>
+                    setCurrentPage((p) => Math.min(totalPages, p + 1))
+                  }
                 >
-                  {i + 1}
+                  &raquo;
                 </button>
               </li>
-            ))}
-            <li
-              className={`page-item ${
-                currentPage === totalPages && "disabled"
-              }`}
-            >
-              <button
-                className="page-link"
-                onClick={() =>
-                  setCurrentPage((p) => Math.min(totalPages, p + 1))
-                }
-              >
-                &raquo;
-              </button>
-            </li>
-          </ul>
-        </nav>
-      )}
+            </ul>
+          </nav>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/src/components/common/DateRangePicker.jsx b/src/components/common/DateRangePicker.jsx
index 8e53b5e6..fd0cc6e3 100644
--- a/src/components/common/DateRangePicker.jsx
+++ b/src/components/common/DateRangePicker.jsx
@@ -33,7 +33,7 @@ const DateRangePicker = ({
       startDate.setHours(0, 0, 0, 0);
     }
 
-    const fp = flatpickr(inputRef.current, { 
+    const fp = flatpickr(inputRef.current, {
       mode: "range",
       dateFormat: "Y-m-d",
       altInput: true,
@@ -63,19 +63,18 @@ const DateRangePicker = ({
   };
 
   return (
-    <div className={`col-${sm} col-sm-${md} px-1`}>
+    <div className={`position-relative w-auto justify-content-center`}>
       <input
         type="text"
-        className="form-control form-control-sm ps-2 pe-5 me-4"
+        className="form-control form-control-sm w-100 pe-8 "
         placeholder="From to End"
         id="flatpickr-range"
         ref={inputRef}
       />
 
       <i
-        className="bx bx-calendar calendar-icon cursor-pointer position-relative top-50 translate-middle-y"
+        className="bx bx-calendar calendar-icon cursor-pointer position-absolute top-50 end-0 translate-middle-y me-2 "
         onClick={handleIconClick}
-        style={{ right: "22px", bottom: "-8px" }}
       />
     </div>
   );
@@ -130,7 +129,7 @@ export const DateRangePicker1 = ({
       mode: "range",
       dateFormat: "d-m-Y",
       allowInput: allowText,
-      maxDate ,
+      maxDate,
       onChange: (selectedDates) => {
         if (selectedDates.length === 2) {
           const [start, end] = selectedDates;
@@ -160,19 +159,19 @@ export const DateRangePicker1 = ({
   }, []);
 
   useEffect(() => {
-  if (resetSignal !== undefined) {
-    if (defaultRange) {
-      applyDefaultDates();
-    } else {
-      setValue(startField, "", { shouldValidate: true });
-      setValue(endField, "", { shouldValidate: true });
+    if (resetSignal !== undefined) {
+      if (defaultRange) {
+        applyDefaultDates();
+      } else {
+        setValue(startField, "", { shouldValidate: true });
+        setValue(endField, "", { shouldValidate: true });
 
-      if (inputRef.current?._flatpickr) {
-        inputRef.current._flatpickr.clear();
+        if (inputRef.current?._flatpickr) {
+          inputRef.current._flatpickr.clear();
+        }
       }
     }
-  }
-}, [resetSignal, defaultRange, setValue, startField, endField]);
+  }, [resetSignal, defaultRange, setValue, startField, endField]);
 
 
   const start = getValues(startField);
@@ -183,7 +182,7 @@ export const DateRangePicker1 = ({
     <div className={`position-relative ${className}`}>
       <input
         type="text"
-        className="form-control form-control-sm"
+        className="form-control form-control-sm ps-2 pe-5 me-4 cursor-pointer"
         placeholder={placeholder}
         defaultValue={formattedValue}
         ref={(el) => {
diff --git a/src/pages/Activities/AttendancePage.jsx b/src/pages/Activities/AttendancePage.jsx
index 15af37b2..63721bbc 100644
--- a/src/pages/Activities/AttendancePage.jsx
+++ b/src/pages/Activities/AttendancePage.jsx
@@ -124,7 +124,7 @@ const AttendancePage = () => {
         <div className="nav-align-top nav-tabs-shadow ">
           {/* Tabs */}
           <div className="nav-align-top nav-tabs-shadow bg-white border-bottom  pt-5">
-            <div className="row align-items-center g-0 mb-3 mb-md-0 mx-5">
+            <div className="row align-items-center g-0 mb-3 mb-md-0 mx-2 mx-sm-5">
               {/* Tabs */}
               <div className="col-12 col-md">
                 <ul className="nav nav-tabs" role="tablist">
diff --git a/src/pages/Directory/DirectoryPage.jsx b/src/pages/Directory/DirectoryPage.jsx
index 5f819e69..ee9ce170 100644
--- a/src/pages/Directory/DirectoryPage.jsx
+++ b/src/pages/Directory/DirectoryPage.jsx
@@ -19,9 +19,15 @@ import BucketList from "../../components/Directory/BucketList";
 import { MainDirectoryPageSkeleton } from "../../components/Directory/DirectoryPageSkeleton";
 import ContactProfile from "../../components/Directory/ContactProfile";
 import GlobalModel from "../../components/common/GlobalModel";
-import { exportToCSV } from "../../utils/exportUtils";
 import ConfirmModal from "../../components/common/ConfirmModal";
 import { useSelectedProject } from "../../slices/apiDataManager";
+import {
+  exportToCSV,
+  exportToExcel,
+  exportToPDF,
+  exportToPDF1,
+  printTable,
+} from "../../utils/tableExportUtils";
 
 const NotesPage = lazy(() => import("./NotesPage"));
 const ContactsPage = lazy(() => import("./ContactsPage"));
@@ -64,11 +70,49 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
   const [ContactData, setContactData] = useState([]);
 
   const handleExport = (type) => {
-    if (activeTab === "notes" && type === "csv") {
-      exportToCSV(notesData, "notes.csv");
-    }
-    if (activeTab === "contacts" && type === "csv") {
-      exportToCSV(ContactData, "contact.csv");
+    let exportData = activeTab === "notes" ? notesData : ContactData;
+    if (!exportData?.length) return;
+
+    switch (type) {
+      case "csv":
+        exportToCSV(exportData, activeTab === "notes" ? "Notes" : "Contacts");
+        break;
+      case "excel":
+        exportToExcel(exportData, activeTab === "notes" ? "Notes" : "Contacts");
+        break;
+      case "pdf":
+        if (activeTab === "notes") {
+          exportToPDF1(exportData, "Notes");
+        } else {
+          // Columns for Contacts PDF
+          const columns = [
+            "Email",
+            "Phone",
+            "Organization",
+            "Category",
+            "Tags",
+          ];
+
+          // Sanitize and trim long text to avoid PDF overflow
+          const sanitizedData = exportData.map((item) => ({
+            Email: (item.Email || "").slice(0, 40),
+            Phone: (item.Phone || "").slice(0, 20),
+            Organization: (item.Organization || "").slice(0, 30),
+            Category: (item.Category || "").slice(0, 20),
+            Tags: (item.Tags || "").slice(0, 40),
+          }));
+
+          // Export with proper spacing
+          exportToPDF(sanitizedData, "Contacts", columns, {
+            columnWidths: [200, 120, 180, 120, 200], // Adjust widths per column
+            fontSizeHeader: 12,
+            fontSizeRow: 10,
+            rowHeight: 25,
+          });
+        }
+        break;
+      default:
+        console.warn("Unsupported export type");
     }
   };
 
@@ -139,8 +183,9 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                 <ul className="nav nav-tabs">
                   <li className="nav-item cursor-pointer">
                     <a
-                      className={`nav-link ${activeTab === "notes" ? "active" : ""
-                        } fs-6`}
+                      className={`nav-link ${
+                        activeTab === "notes" ? "active" : ""
+                      } fs-6`}
                       onClick={(e) => handleTabClick("notes", e)}
                     >
                       <i className="bx bx-notepad bx-sm me-1_5"></i>
@@ -149,8 +194,9 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                   </li>
                   <li className="nav-item cursor-pointer">
                     <a
-                      className={`nav-link ${activeTab === "contacts" ? "active" : ""
-                        } fs-6`}
+                      className={`nav-link ${
+                        activeTab === "contacts" ? "active" : ""
+                      } fs-6`}
                       onClick={(e) => handleTabClick("contacts", e)}
                     >
                       <i className="bx bxs-contact bx-sm me-1_5"></i>
@@ -182,21 +228,29 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                               value={searchContact}
                               onChange={(e) => setsearchContact(e.target.value)}
                             />
-                            <button
-                              className={`btn btn-sm p-1 ${gridView ? " btn-primary" : " btn-outline-primary"
+                            <div className="d-none d-md-flex gap-2">
+                              {" "}
+                              <button
+                                className={`btn btn-sm p-1 ${
+                                  gridView
+                                    ? " btn-primary"
+                                    : " btn-outline-primary"
                                 }`}
-                              onClick={() => setGridView(true)}
-                            >
-                              <i className="bx bx-grid-alt"></i>
-                            </button>
-
-                            <button
-                              className={`btn btn-sm p-1 ${!gridView ? "btn-primary" : "btn-outline-primary"
+                                onClick={() => setGridView(true)}
+                              >
+                                <i className="bx bx-grid-alt"></i>
+                              </button>
+                              <button
+                                className={`btn btn-sm p-1 ${
+                                  !gridView
+                                    ? "btn-primary"
+                                    : "btn-outline-primary"
                                 }`}
-                              onClick={() => setGridView(false)}
-                            >
-                              <i className="bx bx-list-ul"></i>
-                            </button>
+                                onClick={() => setGridView(false)}
+                              >
+                                <i className="bx bx-list-ul"></i>
+                              </button>
+                            </div>
                           </div>
                         </div>
                       )}
@@ -212,20 +266,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                         <i className="bx bx-dots-vertical-rounded text-muted bx-md"></i>
                       </button>
 
-                      <ul className="dropdown-menu dropdown-menu-end shadow-sm p-2" style={{ minWidth: "220px" }}>
-                        <li>
-                          <button
-                            className="dropdown-item d-flex align-items-center gap-2"
-                            onClick={() => handleExport("csv")}
-                          >
-                            <i className="bx bx-file"></i>
-                            <span>Export to CSV</span>
-                          </button>
-                        </li>
-
-                        {/* Divider */}
-                        {activeTab === "contacts" && <li><hr className="dropdown-divider" /></li>}
-
+                      <ul className="dropdown-menu dropdown-menu-end shadow-sm ">
                         {activeTab === "contacts" && (
                           <li className="dropdown-item d-flex align-items-center">
                             <div className="form-check form-switch mb-0">
@@ -235,23 +276,80 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                                 role="switch"
                                 id="inactiveContactsSwitch"
                                 checked={showActive}
-                                onChange={(e) => setShowActive(e.target.checked)}
+                                onChange={(e) =>
+                                  setShowActive(e.target.checked)
+                                }
                               />
                             </div>
-                            <span>{showActive ? "Active Contacts" : "Inactive Contacts"}</span>
+                            <span>
+                              {showActive
+                                ? "Active Contacts"
+                                : "Inactive Contacts"}
+                            </span>
+                          </li>
+                        )}
+                        <li>
+                          <button
+                            className="dropdown-item d-flex align-items-center gap-2"
+                            onClick={() => handleExport("csv")}
+                          >
+                            <i className="bx bx-file"></i>
+                            <span>Export to CSV</span>
+                          </button>
+                        </li>
+                        <li>
+                          <button
+                            className="dropdown-item d-flex align-items-center gap-2"
+                            onClick={() => handleExport("excel")}
+                          >
+                            <i className="bx bx-spreadsheet"></i>
+                            <span>Export to Excel</span>
+                          </button>
+                        </li>
+                        <li>
+                          <button
+                            className="dropdown-item d-flex align-items-center gap-2"
+                            onClick={() => handleExport("pdf")}
+                          >
+                            <i className="bx bxs-file-pdf"></i>
+                            <span>Export to PDF</span>
+                          </button>
+                        </li>
+                        <li className={`d-block d-md-none ${activeTab === "contacts" ? "d-block":"d-none"}`}>
+                          <span
+                            className={`dropdown-item  ${
+                              gridView ? " text-primary" : ""
+                            }`}
+                            onClick={() => setGridView(true)}
+                          >
+                            <i className="bx bx-grid-alt"></i> Card View
+                          </span>
+                        </li>
+
+                        <li className={` d-block d-md-none ${activeTab === "contacts" ? "d-block":"d-none"}`}>
+                          <span
+                            className={`dropdown-item  ${
+                              !gridView ? "text-primary" : ""
+                            }`}
+                            onClick={() => setGridView(false)}
+                          >
+                            <i className="bx bx-list-ul"></i> List View
+                          </span>
+                        </li>
+
+                        {/* Divider */}
+                        {activeTab === "contacts" && (
+                          <li>
+                            <hr className="dropdown-divider" />
                           </li>
                         )}
                       </ul>
                     </div>
-
                   </div>
                 </div>
-
               </div>
-
             </div>
           </div>
-
           <div>
             <Suspense fallback={<MainDirectoryPageSkeleton />}>
               {activeTab === "notes" && (
diff --git a/src/pages/Directory/NotesPage.jsx b/src/pages/Directory/NotesPage.jsx
index 58790562..3f0d4348 100644
--- a/src/pages/Directory/NotesPage.jsx
+++ b/src/pages/Directory/NotesPage.jsx
@@ -42,7 +42,7 @@ const NotesPage = ({ projectId, searchText, onExport }) => {
     };
   }, []);
 
-  // 🔹 Format data for export
+  // Format data for export
   const formatExportData = (notes) => {
     return notes.map((n) => ({
       ContactName: n.contactName || "",
@@ -59,7 +59,7 @@ const NotesPage = ({ projectId, searchText, onExport }) => {
     }));
   };
 
-  // 🔹 Pass formatted notes to parent for export
+  // Pass formatted notes to parent for export
   useEffect(() => {
     if (data?.data && onExport) {
       onExport(formatExportData(data.data));
diff --git a/src/pages/Expense/ExpensePage.jsx b/src/pages/Expense/ExpensePage.jsx
index f826c018..2fc819e1 100644
--- a/src/pages/Expense/ExpensePage.jsx
+++ b/src/pages/Expense/ExpensePage.jsx
@@ -20,6 +20,7 @@ import {
 } from "../../utils/constants";
 
 import { defaultFilter, SearchSchema } from "../../components/Expenses/ExpenseSchema";
+import PreviewDocument from "../../components/Expenses/PreviewDocument";
 
 // Context
 export const ExpenseContext = createContext();
diff --git a/src/utils/exportUtils.js b/src/utils/exportUtils.js
deleted file mode 100644
index 40f7d423..00000000
--- a/src/utils/exportUtils.js
+++ /dev/null
@@ -1,27 +0,0 @@
-// utils/exportUtils.js
-export const exportToCSV = (data, filename = "export.csv") => {
-  if (!data || data.length === 0) return;
-
-  const headers = Object.keys(data[0]);
-  const csvRows = [];
-
-  // Add headers
-  csvRows.push(headers.join(","));
-
-  // Add values
-  data.forEach(row => {
-    const values = headers.map(header => `"${row[header] ?? ""}"`);
-    csvRows.push(values.join(","));
-  });
-
-  // Create CSV Blob
-  const csvContent = csvRows.join("\n");
-  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
-
-  // Create download link
-  const link = document.createElement("a");
-  const url = URL.createObjectURL(blob);
-  link.setAttribute("href", url);
-  link.setAttribute("download", filename);
-  link.click();
-};
diff --git a/src/utils/tableExportUtils.jsx b/src/utils/tableExportUtils.jsx
index 57af704f..768ff5ac 100644
--- a/src/utils/tableExportUtils.jsx
+++ b/src/utils/tableExportUtils.jsx
@@ -40,39 +40,52 @@ export const exportToExcel = (data, fileName = "data") => {
  * @param {Array} data - Array of objects to export
  * @param {string} fileName - File name for the PDF (optional)
  */
-export const exportToPDF = async (data, fileName = "data", columns = null) => {
+const sanitizeText = (text) => {
+  if (!text) return "";
+  // Replace all non-ASCII characters with "?" or remove them
+  return text.replace(/[^\x00-\x7F]/g, "?");
+};
+
+export const exportToPDF = async (data, fileName = "data", columns = null, options = {}) => {
   if (!data || data.length === 0) return;
 
   const pdfDoc = await PDFDocument.create();
   const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
 
-  // Landscape dimensions
-  const pageWidth = 1000; // wider for more space
+  // Default options
+  const {
+    columnWidths = [],  // array of widths per column
+    fontSizeHeader = 12,
+    fontSizeRow = 10,
+    rowHeight = 25,
+  } = options;
+
+  const pageWidth = 1000;
   const pageHeight = 600;
   let page = pdfDoc.addPage([pageWidth, pageHeight]);
   const margin = 30;
   let y = pageHeight - margin;
 
   const headers = columns || Object.keys(data[0]);
-  const rowHeight = 25; // slightly taller rows for readability
-  const columnSpacing = 150; // increase space between columns
 
   // Draw headers
   headers.forEach((header, i) => {
-    page.drawText(header, { x: margin + i * columnSpacing, y, font, size: 12 });
+    const x = margin + (columnWidths[i] ? columnWidths.slice(0, i).reduce((a, b) => a + b, 0) : i * 150);
+    page.drawText(header, { x, y, font, size: fontSizeHeader });
   });
   y -= rowHeight;
 
   // Draw rows
   data.forEach(row => {
     headers.forEach((header, i) => {
-      const text = row[header] ? row[header].toString() : '';
-      page.drawText(text, { x: margin + i * columnSpacing, y, font, size: 10 });
+      const x = margin + (columnWidths[i] ? columnWidths.slice(0, i).reduce((a, b) => a + b, 0) : i * 150);
+      const text = row[header] || '';
+      page.drawText(text, { x, y, font, size: fontSizeRow });
     });
     y -= rowHeight;
 
     if (y < margin) {
-      page = pdfDoc.addPage([pageWidth, pageHeight]); // landscape for new page
+      page = pdfDoc.addPage([pageWidth, pageHeight]);
       y = pageHeight - margin;
     }
   });
@@ -87,6 +100,95 @@ export const exportToPDF = async (data, fileName = "data", columns = null) => {
 
 
 
+
+
+/**
+ * Export JSON data to PDF in a card-style format
+ * @param {Array} data - Array of objects to export
+ * @param {string} fileName - File name for the PDF (optional)
+ */
+export const exportToPDF1 = async (data, fileName = "data") => {
+  if (!data || data.length === 0) return;
+
+  const pdfDoc = await PDFDocument.create();
+  const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
+  const boldFont = await pdfDoc.embedFont(StandardFonts.HelveticaBold);
+
+  const pageWidth = 600;
+  const pageHeight = 800;
+  const margin = 30;
+  const cardSpacing = 20;
+  const cardPadding = 10;
+  let page = pdfDoc.addPage([pageWidth, pageHeight]);
+  let y = pageHeight - margin;
+
+  for (const item of data) {
+    const title = item.ContactName || "";
+    const subtitle = `by ${item.CreatedBy || ""} on ${item.CreatedAt || ""}`;
+    const body = item.Note || "";
+
+    const cardHeight = 80 + (body.length / 60) * 14; // approximate height for body text
+
+    if (y - cardHeight < margin) {
+      page = pdfDoc.addPage([pageWidth, pageHeight]);
+      y = pageHeight - margin;
+    }
+
+    // Draw card border
+    page.drawRectangle({
+      x: margin,
+      y: y - cardHeight,
+      width: pageWidth - 2 * margin,
+      height: cardHeight,
+      borderColor: rgb(0.7, 0.7, 0.7),
+      borderWidth: 1,
+      color: rgb(1, 1, 1),
+    });
+
+    // Draw title
+    page.drawText(title, {
+      x: margin + cardPadding,
+      y: y - 20,
+      font: boldFont,
+      size: 12,
+      color: rgb(0.1, 0.1, 0.1),
+    });
+
+    // Draw subtitle
+    page.drawText(subtitle, {
+      x: margin + cardPadding,
+      y: y - 35,
+      font,
+      size: 10,
+      color: rgb(0.4, 0.4, 0.4),
+    });
+
+    // Draw body text (wrap manually)
+    const lines = body.match(/(.|[\r\n]){1,80}/g) || [];
+    lines.forEach((line, i) => {
+      page.drawText(line, {
+        x: margin + cardPadding,
+        y: y - 50 - i * 12,
+        font,
+        size: 10,
+        color: rgb(0.2, 0.2, 0.2),
+      });
+    });
+
+    y -= cardHeight + cardSpacing;
+  }
+
+  const pdfBytes = await pdfDoc.save();
+  const blob = new Blob([pdfBytes], { type: 'application/pdf' });
+  const link = document.createElement('a');
+  link.href = URL.createObjectURL(blob);
+  link.download = `${fileName}.pdf`;
+  link.click();
+};
+
+
+
+
 /**
  * Print the HTML table by accepting the table element or a reference.
  * @param {HTMLElement} table - The table element (or ref) to print