diff --git a/src/components/reports/Progress.jsx b/src/components/reports/Progress.jsx
index 89d1dfca..3625ff19 100644
--- a/src/components/reports/Progress.jsx
+++ b/src/components/reports/Progress.jsx
@@ -8,7 +8,7 @@ const Progress = ({
   total = 0,
   height = 100,
   width = 100,
-  completed =0,
+  completed = 0,
 }) => {
   const options = {
     chart: {
@@ -24,16 +24,19 @@ const Progress = ({
           value: {
             show: true,
             fontSize: "13px",
-            width:"12px",
-            textWrap:"wrap",
+            width: "12px",
+            textWrap: "wrap",
             color: color,
             fontWeight: 400,
             offsetY: 7,
-            formatter: () => `${formatFigure(completed,{notation:"compact"})} / ${formatFigure(total,{notation:"compact"})}`,
+            formatter: () =>
+              `${formatFigure(completed, {
+                notation: "compact",
+              })} / ${formatFigure(total, { notation: "compact" })}`,
+          },
+          style: {
+            textWrap: "wrap",
           },
-          style:{
-            textWrap:"wrap",
-          }
         },
       },
     },
@@ -54,7 +57,6 @@ const Progress = ({
 };
 export default Progress;
 
-
 // const Progress = ({
 //   completed = 0,
 //   inProgress = 0,
diff --git a/src/components/reports/ReportsDonutCard.jsx b/src/components/reports/ReportsDonutCard.jsx
index 3565934a..a6d0dcdb 100644
--- a/src/components/reports/ReportsDonutCard.jsx
+++ b/src/components/reports/ReportsDonutCard.jsx
@@ -10,10 +10,10 @@ const ReportsDonutCard = ({
   footer = "Team members present on the site",
   chartColor,
   legend1 = "Completed",
-  legend2 = "Pending"
+  legend2 = "Pending",
 }) => {
   return (
-    <div className="border-top card border-primary py-4 px-2">
+    <div className="border-top card border-primary py-4 px-2  h-100">
       <h4 className="reports-card-title">{title}</h4>
 
       <div className="d-flex justify-content-center align-items-center flex-column">
@@ -26,10 +26,7 @@ const ReportsDonutCard = ({
             completed={value}
             total={total}
           />
-          <ReportsLegend
-          legend1={legend1}
-          legend2={legend2}
-          />
+          <ReportsLegend legend1={legend1} legend2={legend2} />
         </div>
       </div>
 
@@ -56,7 +53,6 @@ export const ReportsCard = ({
 
       <div className="d-flex justify-content-start align-items-center flex-column">
         <div className="d-inline-flex flex-row align-items-center gap-12 gap-md-3">
-         
           <ReportsLegend />
         </div>
       </div>
@@ -67,5 +63,3 @@ export const ReportsCard = ({
     </div>
   );
 };
-
-
diff --git a/src/components/reports/report-dpr.jsx b/src/components/reports/report-dpr.jsx
index 24ae3a81..adcfc8cf 100644
--- a/src/components/reports/report-dpr.jsx
+++ b/src/components/reports/report-dpr.jsx
@@ -4,6 +4,7 @@ import Progress from "./Progress";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import { localToUtc } from "../../utils/appUtils";
 import ReportsDonutCard, { ReportsCard } from "./ReportsDonutCard";
+import { SpinnerLoader } from "../common/Loader";
 
 const ReportDPR = ({ project, date }) => {
   const { data, isLoading, isError, error } = useProjectReportByProject(
@@ -12,94 +13,117 @@ const ReportDPR = ({ project, date }) => {
   );
   return (
     <>
-      <div className="card py-2">
+      <div className="card py-2 mb-5">
         <div className="d-flex text-start px-2 mt-2">
           Project Status Reported - Generated at{" "}
           {formatUTCToLocalTime(data?.date, true)}
         </div>
 
         {/* <!-- Status Cards */}
-        <div className="d-flex justify-content-between flex-wrap gap-5 px-3 py-4">
-          <ReportsDonutCard
-            title={"TODAY'S ATTENDANCE"}
-            total={data?.totalEmployees}
-            value={data?.todaysAttendances}
-            legend1="Today's Attendance"
-            legend2="Total Employees"
-          />
-          <ReportsDonutCard
-            title={"DAILY TASKS COMPLETED"}
-            total={data?.totalCompletedTask}
-            value={data?.totalPlannedWork}
-            chartColor={"blue"}
-            footer=""
-            legend1="Completed Work"
-            legend2="Planned Work"
-          />
-
-          <ReportsDonutCard
-            title={"PROJECT COMPLETION STATUS"}
-            total={data?.totalPlannedWork}
-            value={data?.totalCompletedWork}
-            chartColor={"green"}
-            footer=""
-            legend1="Completed Work"
-            legend2="Planned Work"
-          />
-
-          <div className="border-top card border-warning py-4 px-2">
-            <h5 className="reports-card-title">Attendance Pending Report</h5>
-            <div className="d-flex flex-column gap-2">
-              <div className="d-flex justify-content-between">
-                <span className="text-secondry"> Regualrization</span>{" "}
-                <span className="text-secondry">
-                  {" "}
-                  {data?.regularizationPending}
-                </span>{" "}
-              </div>
-              <div className="d-flex justify-content-between">
-                <span className="text-secondry"> Checking</span>{" "}
-                <span className="text-secondry"> {data?.checkoutPending}</span>{" "}
-              </div>
-              <div className="d-flex justify-content-between">
-                <span className="text-secondry"> Total Employee</span>{" "}
-                <span className="text-secondry">
-                  {" "}
-                  {data?.todaysAttendances}
-                </span>{" "}
+        <div className="row px-5 py-4">
+          <div className="col-6 col-md-3" style={{ minHeight: "255px" }}>
+            {" "}
+            <ReportsDonutCard
+              title={"TODAY'S ATTENDANCE"}
+              total={data?.totalEmployees}
+              value={data?.todaysAttendances}
+              legend1="Today's Attendance"
+              legend2="Total Employees"
+            />
+          </div>
+          <div className="col-6 col-md-3" style={{ minHeight: "255px" }}>
+            {" "}
+            <ReportsDonutCard
+              title={"DAILY TASKS COMPLETED"}
+              total={data?.totalCompletedTask}
+              value={data?.totalPlannedWork}
+              chartColor={"blue"}
+              footer=""
+              legend1="Completed Work"
+              legend2="Planned Work"
+            />
+          </div>
+          <div className="col-6 col-md-3" style={{ minHeight: "255px" }}>
+            {" "}
+            <ReportsDonutCard
+              title={"PROJECT COMPLETION STATUS"}
+              total={data?.totalPlannedWork}
+              value={data?.totalCompletedWork}
+              chartColor={"green"}
+              footer=""
+              legend1="Completed Work"
+              legend2="Planned Work"
+            />
+          </div>
+          <div className="col-6 col-md-3" style={{ minHeight: "255px" }}>
+            <div className="border-top card border-warning py-4 px-2 h-100">
+              <h5 className="reports-card-title">Attendance Pending Report</h5>
+              <div className="d-flex flex-column gap-2">
+                <div className="d-flex justify-content-between">
+                  <span className="text-secondry"> Regualrization</span>{" "}
+                  <span className="text-secondry">
+                    {" "}
+                    {data?.regularizationPending}
+                  </span>{" "}
+                </div>
+                <div className="d-flex justify-content-between">
+                  <span className="text-secondry"> Checking</span>{" "}
+                  <span className="text-secondry">
+                    {" "}
+                    {data?.checkoutPending}
+                  </span>{" "}
+                </div>
+                <div className="d-flex justify-content-between">
+                  <span className="text-secondry"> Total Employee</span>{" "}
+                  <span className="text-secondry">
+                    {" "}
+                    {data?.todaysAttendances}
+                  </span>{" "}
+                </div>
               </div>
             </div>
           </div>
         </div>
-        <div className="row px-3">
+        <div className="row px-5 pb-5">
           <div className="col-4">
-            <div className="reports-card">
+            <div className="reports-card  h-100" style={{ minHeight: "250px" }}>
               {/* {/* <!-- Row 1: Header */}
               <div>
                 <h4 className="reports-card-title">Team Strength on Site</h4>
               </div>
               <table style={{ width: "100%" }}>
                 <tbody>
-                  {data?.teamOnSite
-                    ?.filter((item) => item?.numberofEmployees > 0)
-                    ?.map((member, index) => (
-                      <tr key={index}>
-                        <td style={{ textAlign: "left" }}>
-                          {member?.roleName}
-                        </td>
+                  {data?.teamOnSite?.filter(
+                    (item) => item?.numberofEmployees > 0
+                  ).length > 0 ? (
+                    data?.teamOnSite
 
-                        <td style={{ textAlign: "right" }}>
-                          {member?.numberofEmployees}
-                        </td>
-                      </tr>
-                    ))}
+                      ?.filter((item) => item?.numberofEmployees > 0)
+                      ?.map((member, index) => (
+                        <tr key={index}>
+                          <td style={{ textAlign: "left" }}>
+                            {member?.roleName}
+                          </td>
+
+                          <td style={{ textAlign: "right" }}>
+                            {member?.numberofEmployees}
+                          </td>
+                        </tr>
+                      ))
+                  ) : (
+                    <tr>
+                      <td colSpan="2" style={{ textAlign: "center" }}>
+                        No Records Available
+                      </td>
+                    </tr>
+                  )}
                 </tbody>
               </table>
             </div>
           </div>
           <div className="col-8">
             {/* {/* <!-- Activities */}
-            <div className="reports-card">
+            <div className="reports-card  h-100" style={{ minHeight: "250px" }}>
               <h4 className="reports-card-title">Employee In-Out Report </h4>
               <table className="reports-table">
                 <thead>
@@ -111,18 +135,34 @@ const ReportDPR = ({ project, date }) => {
                   </tr>
                 </thead>
                 <tbody>
-                  {data?.performedAttendance?.map((att, index) => (
-                    <tr key={att.index + att.name}>
-                      <td>{att.name}</td>
-                      <td>{att.roleName}</td>
-                      <td>{formatUTCToLocalTime(att.inTime, true)}</td>
-                      <td>
-                        {att.outTime
-                          ? formatUTCToLocalTime(att.outTime, true)
-                          : "--"}
+                  {data?.performedAttendance?.length > 0 ? (
+                    data?.performedAttendance?.map((att, index) => (
+                      <tr key={att.index + att.name}>
+                        <td>{att.name}</td>
+                        <td>{att.roleName}</td>
+                        <td>{formatUTCToLocalTime(att.inTime, true)}</td>
+                        <td>
+                          {att.outTime
+                            ? formatUTCToLocalTime(att.outTime, true)
+                            : "--"}
+                        </td>
+                      </tr>
+                    ))
+                  ) : (
+                    <tr>
+                      <td
+                        colSpan="4"
+                        className="text-center py-4 border-0"
+                        style={{ height: "200px" }}
+                      >
+                        {isLoading ? (
+                          <SpinnerLoader />
+                        ) : (
+                          <div className="py-8">No Records Available</div>
+                        )}
                       </td>
                     </tr>
-                  ))}
+                  )}
                 </tbody>
               </table>
             </div>