diff --git a/src/components/DailyProgressRport/TaskReportFilterPanel.jsx b/src/components/DailyProgressRport/TaskReportFilterPanel.jsx
index 8394a158..e682ad14 100644
--- a/src/components/DailyProgressRport/TaskReportFilterPanel.jsx
+++ b/src/components/DailyProgressRport/TaskReportFilterPanel.jsx
@@ -39,14 +39,12 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
       dateTo: localToUtc(formData.dateTo),
     };
     handleFilter(filterPayload);
-    closePanel();
   };
 
   const onClear = () => {
     setResetKey((prev) => prev + 1);
     handleFilter(TaskReportDefaultValue);
     reset(TaskReportDefaultValue);
-    closePanel();
   };
   return (
     <FormProvider {...methods}>
diff --git a/src/components/DailyProgressRport/TaskReportList.jsx b/src/components/DailyProgressRport/TaskReportList.jsx
index 00cb064e..bcb4232b 100644
--- a/src/components/DailyProgressRport/TaskReportList.jsx
+++ b/src/components/DailyProgressRport/TaskReportList.jsx
@@ -204,24 +204,34 @@ const TaskReportList = () => {
                   <HoverPopup
                     id="total_pending_task"
                     title="Total Pending Task"
-                    content={<p>This shows the total pending tasks for each activity on that date.</p>}
+                    content={
+                      <div className="text-wrap" style={{ maxWidth: "200px" }}>
+                        This shows the total pending tasks for each activity on that date.
+                      </div>
+                    }
                   >
                     <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
                   </HoverPopup>
                 </span>
               </th>
+
               <th>
                 <span>
                   Reported/Planned{" "}
                   <HoverPopup
                     id="reportes_and_planned_task"
                     title="Reported and Planned Task"
-                    content={<p>This shows the reported versus planned tasks for each activity on that date.</p>}
+                    content={
+                      <div className="text-wrap" style={{ maxWidth: "200px" }}>
+                        This shows the reported versus planned tasks for each activity on that date.
+                      </div>
+                    }
                   >
                     <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
                   </HoverPopup>
                 </span>
               </th>
+
               <th>Assign Date</th>
               <th>Team</th>
               <th className="text-center">Actions</th>
diff --git a/src/components/Dashboard/AttendanceOverview.jsx b/src/components/Dashboard/AttendanceOverview.jsx
index 77fbee51..e6fc0624 100644
--- a/src/components/Dashboard/AttendanceOverview.jsx
+++ b/src/components/Dashboard/AttendanceOverview.jsx
@@ -100,7 +100,7 @@ const AttendanceOverview = () => {
   };
 
   return (
-    <div className="bg-white px-4 rounded shadow d-flex flex-column h-100">
+    <div className="bg-white px-4 rounded shadow d-flex flex-column h-100" style={{ minHeight: "450px" }}>
       {/* Header */}
       <div className="d-flex mt-2 justify-content-between align-items-center mb-3">
         <div className="card-title mb-0 text-start">
diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index ad5ead8c..e5ed7edc 100644
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@@ -17,12 +17,19 @@ import ExpenseAnalysis from "./ExpenseAnalysis";
 import ExpenseStatus from "./ExpenseStatus";
 import ExpenseByProject from "./ExpenseByProject";
 import ProjectStatistics from "../Project/ProjectStatistics";
+import ServiceJobs from "./ServiceJobs";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import { REGULARIZE_ATTENDANCE, SELF_ATTENDANCE, TEAM_ATTENDANCE } from "../../utils/constants";
 
 const Dashboard = () => {
 
     // Get the selected project ID from Redux store
     const projectId = useSelector((store) => store.localVariables.projectId);
     const isAllProjectsSelected = projectId === null;
+    const canRegularize = useHasUserPermission(REGULARIZE_ATTENDANCE);
+    const canTeamAttendance = useHasUserPermission(TEAM_ATTENDANCE);
+    const canSelfAttendance = useHasUserPermission(SELF_ATTENDANCE);
+
 
     return (
         <div className="container-fluid mt-5">
@@ -49,7 +56,7 @@ const Dashboard = () => {
                 <div className="col-xxl-6 col-lg-6">
                     <ProjectProgressChart />
                 </div>
-                {!isAllProjectsSelected && (
+                {!isAllProjectsSelected && (canRegularize || canTeamAttendance || canSelfAttendance) && (
                     <div className="col-12 col-md-6 mb-sm-0 mb-4">
                         <AttendanceOverview />
                     </div>
@@ -57,7 +64,9 @@ const Dashboard = () => {
 
                 {!isAllProjectsSelected && (
                     <div className="col-xxl-4 col-lg-4">
-                        <ProjectStatistics />
+                        <div className="card h-100">
+                            <ProjectStatistics />
+                        </div>
                     </div>
                 )}
                 <div className="col-12 col-xl-4 col-md-6">
@@ -74,6 +83,9 @@ const Dashboard = () => {
                 <div className="col-12 col-md-6">
                     <ExpenseByProject />
                 </div>
+                {/* <div className="col-12 col-md-12">
+                    <ServiceJobs />
+                </div> */}
             </div>
         </div>
     );
diff --git a/src/components/Dashboard/ServiceJobs.jsx b/src/components/Dashboard/ServiceJobs.jsx
new file mode 100644
index 00000000..987addda
--- /dev/null
+++ b/src/components/Dashboard/ServiceJobs.jsx
@@ -0,0 +1,237 @@
+import React from "react";
+
+const ServiceJobs = () => {
+  return (
+    <div className="col-xxl-4 col-lg-6">
+      <div className="card h-100">
+        <div className="card-header d-flex justify-content-between">
+          <div className="card-title mb-0 text-start">
+            <h5 className="mb-1">Service Jobs</h5>
+            <p className="card-subtitle">All Projects</p>
+          </div>
+        </div>
+
+        <div className="card-body p-0">
+          <div className="nav-align-top">
+
+            {/* Tabs */}
+            <ul className="nav nav-tabs nav-fill rounded-0 timeline-indicator-advanced" role="tablist">
+              <li className="nav-item">
+                <button className="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-new">
+                  My Jobs
+                </button>
+              </li>
+              <li className="nav-item">
+                <button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-preparing">
+                  Assigned
+                </button>
+              </li>
+              <li className="nav-item">
+                <button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-shipping">
+                  In Progress
+                </button>
+              </li>
+            </ul>
+
+            {/* Tab Content */}
+            <div className="tab-content border-0 mx-1 text-start">
+
+              {/* ---------------------- NEW TAB ---------------------- */}
+              <div className="tab-pane fade show active" id="tab-new">
+                {/* Entry 1 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
+                      <i className="bx bx-check-circle"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-success text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">Myrtle Ullrich</h6>
+                      <p className="text-body mb-0">101 Boulder, California(CA), 95959</p>
+                    </div>
+                  </li>
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">Barry Schowalter</h6>
+                      <p className="text-body mb-0">939 Orange, California(CA), 92118</p>
+                    </div>
+                  </li>
+                </ul>
+
+                <div className="border-1 border-light border-top border-dashed my-4"></div>
+
+                {/* Entry 2 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
+                      <i className="bx bx-check-circle"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-success text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">Veronica Herman</h6>
+                      <p className="text-body mb-0">162 Windsor, California(CA), 95492</p>
+                    </div>
+                  </li>
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">Helen Jacobs</h6>
+                      <p className="text-body mb-0">487 Sunset, California(CA), 94043</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+
+              {/* ---------------------- PREPARING TAB ---------------------- */}
+              <div className="tab-pane fade" id="tab-preparing">
+
+                {/* Entry 1 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
+                      <i className="bx bx-time-five"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-warning text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">Oliver Grant</h6>
+                      <p className="text-body mb-0">220 Pine St, California(CA), 95765</p>
+                    </div>
+                  </li>
+
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">Samantha Lee</h6>
+                      <p className="text-body mb-0">744 Bay Area, California(CA), 94016</p>
+                    </div>
+                  </li>
+                </ul>
+
+                <div className="border-1 border-light border-top border-dashed my-4"></div>
+
+                {/* Entry 2 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
+                      <i className="bx bx-time-five"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-warning text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">Marcus Howard</h6>
+                      <p className="text-body mb-0">58 Avenue, California(CA), 95376</p>
+                    </div>
+                  </li>
+
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">Daniel Foster</h6>
+                      <p className="text-body mb-0">312 Marina, California(CA), 94109</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+
+              {/* ---------------------- SHIPPING TAB ---------------------- */}
+              <div className="tab-pane fade" id="tab-shipping">
+
+                {/* Entry 1 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
+                      <i className="bx bx-package"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-info text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">James Carter</h6>
+                      <p className="text-body mb-0">441 Market St, California(CA), 94111</p>
+                    </div>
+                  </li>
+
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">Linda Moore</h6>
+                      <p className="text-body mb-0">990 Willow Road, California(CA), 94025</p>
+                    </div>
+                  </li>
+                </ul>
+
+                <div className="border-1 border-light border-top border-dashed my-4"></div>
+
+                {/* Entry 2 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
+                      <i className="bx bx-package"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-info text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">Sarah Bennett</h6>
+                      <p className="text-body mb-0">882 Canyon Rd, California(CA), 94704</p>
+                    </div>
+                  </li>
+
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">George Simmons</h6>
+                      <p className="text-body mb-0">19 Palm St, California(CA), 93001</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  );
+};
+
+export default ServiceJobs;
diff --git a/src/components/Expenses/Filelist.jsx b/src/components/Expenses/Filelist.jsx
index 34253735..fdb13793 100644
--- a/src/components/Expenses/Filelist.jsx
+++ b/src/components/Expenses/Filelist.jsx
@@ -67,7 +67,7 @@ export const FilelistView = ({ files, viewFile }) => {
                   e.preventDefault();
                   viewFile({
                     IsOpen: true,
-                    Image: file.preSignedUrl,
+                    Image: files,
                   });
                 }}
               >
diff --git a/src/components/Expenses/ManageExpense.jsx b/src/components/Expenses/ManageExpense.jsx
index 40b4bebf..598b1bf8 100644
--- a/src/components/Expenses/ManageExpense.jsx
+++ b/src/components/Expenses/ManageExpense.jsx
@@ -236,31 +236,8 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
         {expenseToEdit ? "Update Expense " : "Create New Expense"}
       </h5>
       <form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
-        <div className="row my-2 text-start">
-          {/* <div className="col-md-6">
-            <Label className="form-label" required>
-              Select Project
-            </Label>
-            <select
-              className="form-select form-select-sm"
-              {...register("projectId")}
-            >
-              <option value="">Select Project</option>
-              {projectLoading ? (
-                <option>Loading...</option>
-              ) : (
-                projectNames?.map((project) => (
-                  <option key={project.id} value={project.id}>
-                    {project.name}
-                  </option>
-                ))
-              )}
-            </select>
-            {errors.projectId && (
-              <small className="danger-text">{errors.projectId.message}</small>
-            )}
-          </div> */}
-          <div className="col-12 col-md-6 mb-2">
+        <div className="row my-2 text-start">         
+          <div className="col-12 col-md-6">
             <SelectProjectField
               label="Project"
               required
@@ -283,7 +260,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               Expense Category
             </Label>
             <select
-              className="form-select form-select-sm"
+              className="form-select "
               id="expenseCategoryId"
               {...register("expenseCategoryId")}
             >
@@ -314,7 +291,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               Payment Mode
             </Label>
             <select
-              className="form-select form-select-sm"
+              className="form-select "
               id="paymentModeId"
               {...register("paymentModeId")}
             >
@@ -337,34 +314,23 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               </small>
             )}
           </div>
-          <div className="col-12 col-md-6 text-start">
-            {/* <Label className="form-label" required>
-              Paid By{" "}
-            </Label> */}
-            {/* <EmployeeSearchInput
-              control={control}
-              name="paidById"
-              projectId={null}
-              forAll={true}
-            /> */}
-
+          <div className="col-12 col-md-6 text-start">           
             <AppFormController
-              name="paidById"
-              
+              name="paidById"              
               control={control}
               render={({ field }) => (
                 <SelectEmployeeServerSide
                 label="Paid By" required
                   value={field.value}
                   onChange={field.onChange}
-                  isFullObject={false} // because using ID
+                  isFullObject={false} 
                 />
               )}
             />
           </div>
         </div>
 
-        <div className="row my-2 text-start">
+        <div className="row my-2 text-start mb-4">
           <div className="col-md-6">
             <Label htmlFor="transactionDate" className="form-label" required>
               Transaction Date
@@ -374,6 +340,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               className="w-100"
               control={control}
               maxDate={new Date()}
+              size="md"
             />
 
             {errors.transactionDate && (
@@ -390,7 +357,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             <input
               type="number"
               id="amount"
-              className="form-control form-control-sm"
+              className="form-control "
               min="1"
               step="0.01"
               inputMode="decimal"
@@ -402,7 +369,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
           </div>
         </div>
 
-        <div className="row my-2 text-start">
+        <div className="row my-2 text-start mb-4">
           <div className="col-md-6">
             <Label htmlFor="supplerName" className="form-label" required>
               Supplier Name/Transporter Name/Other
@@ -410,7 +377,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             <input
               type="text"
               id="supplerName"
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("supplerName")}
             />
             {errors.supplerName && (
@@ -427,7 +394,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             <input
               type="text"
               id="location"
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("location")}
             />
             {errors.location && (
@@ -435,7 +402,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             )}
           </div>
         </div>
-        <div className="row my-2 text-start">
+        <div className="row my-2 text-start mb-4">
           <div className="col-md-6">
             <label htmlFor="statusId" className="form-label ">
               Transaction ID
@@ -443,7 +410,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             <input
               type="text"
               id="transactionId"
-              className="form-control form-control-sm"
+              className="form-control "
               min="1"
               {...register("transactionId")}
             />
@@ -460,7 +427,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             <input
               type="text"
               id="gstNumber"
-              className="form-control form-control-sm"
+              className="form-control "
               min="1"
               {...register("gstNumber")}
             />
@@ -469,13 +436,13 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             )}
           </div>
         </div>
-        <div className="row">
+        <div className="row mb-4">
           <div className="col-md-6 text-start ">
             <Label htmlFor="currencyId" className="form-label" required>
               Select Currency
             </Label>
             <select
-              className="form-select form-select-sm"
+              className="form-select "
               id="currencyId"
               {...register("currencyId")}
             >
@@ -497,14 +464,14 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             )}
           </div>
           {expenseCategory?.noOfPersonsRequired && (
-            <div className="col-md-6  text-start">
+            <div className="col-md-6 text-start">
               <Label className="form-label" required>
                 No. of Persons
               </Label>
               <input
                 type="number"
                 id="noOfPersons"
-                className="form-control form-control-sm"
+                className="form-control "
                 {...register("noOfPersons")}
                 inputMode="numeric"
               />
@@ -517,14 +484,14 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
           )}
         </div>
 
-        <div className="row my-2 text-start">
+        <div className="row my-2 text-start mb-4">
           <div className="col-md-12">
             <Label htmlFor="description" className="form-label" required>
               Description
             </Label>
             <textarea
               id="description"
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("description")}
               rows="2"
             ></textarea>
@@ -536,7 +503,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
           </div>
         </div>
 
-        <div className="row my-2 text-start">
+        <div className="row my-4 text-start">
           <div className="col-md-12">
             <Label className="form-label" required>
               Upload Bill{" "}
diff --git a/src/components/Expenses/PreviewDocument.jsx b/src/components/Expenses/PreviewDocument.jsx
index 2f0e796b..142ee65c 100644
--- a/src/components/Expenses/PreviewDocument.jsx
+++ b/src/components/Expenses/PreviewDocument.jsx
@@ -1,80 +1,169 @@
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 
+const PreviewDocument = ({ files = [] }) => {
+  const images = Array.isArray(files) ? files : [files];
 
-const PreviewDocument = ({ imageUrl }) => {
+  const [index, setIndex] = useState(0);
   const [loading, setLoading] = useState(true);
   const [rotation, setRotation] = useState(0);
   const [scale, setScale] = useState(1);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [dragging, setDragging] = useState(false);
+
+  const startPos = useRef({ x: 0, y: 0 });
+
+  const MIN_ZOOM = 0.4;
+  const MAX_ZOOM = 3;
+
+  const currentImage = images[index];
+
+  // Reset on image change
+  useEffect(() => {
+    setRotation(0);
+    setScale(1);
+    setPosition({ x: 0, y: 0 });
+    setLoading(true);
+  }, [index]);
+
+  const zoomIn = () => setScale((prev) => Math.min(prev + 0.2, MAX_ZOOM));
+  const zoomOut = () => setScale((prev) => Math.max(prev - 0.2, MIN_ZOOM));
 
-  const zoomIn = () => setScale((prev) => Math.min(prev + 0.2, 3));
-  const zoomOut = () => setScale((prev) => Math.max(prev - 0.2, 0.4));
   const resetAll = () => {
     setRotation(0);
     setScale(1);
+    setPosition({ x: 0, y: 0 });
   };
 
+  const nextImage = () => {
+    if (index < images.length - 1) setIndex((i) => i + 1);
+  };
+
+  const prevImage = () => {
+    if (index > 0) setIndex((i) => i - 1);
+  };
+
+  const handleWheel = (e) => {
+    e.preventDefault();
+
+    if (e.ctrlKey) {
+      const delta = e.deltaY > 0 ? -0.1 : 0.1;
+      setScale((prev) => {
+        let next = prev + delta;
+        if (next < MIN_ZOOM) next = MIN_ZOOM;
+        if (next > MAX_ZOOM) next = MAX_ZOOM;
+        return next;
+      });
+    } else {
+      if (e.deltaY > 0) nextImage();
+      else prevImage();
+    }
+  };
+
+  const handleMouseDown = (e) => {
+    setDragging(true);
+    startPos.current = {
+      x: e.clientX - position.x,
+      y: e.clientY - position.y,
+    };
+  };
+
+  const handleMouseMove = (e) => {
+    if (!dragging) return;
+
+    setPosition({
+      x: e.clientX - startPos.current.x,
+      y: e.clientY - startPos.current.y,
+    });
+  };
+
+  const handleMouseUp = () => setDragging(false);
+
+  const handleDoubleClick = () => resetAll();
+
   return (
     <>
-      <div className="d-flex justify-content-start gap-3 mb-2">
-        <i
-          className="bx bx-rotate-right cursor-pointer fs-4"
-          title="Rotate"
-          onClick={() => setRotation((prev) => prev + 90)}
-        ></i>
-
-        <i
-          className="bx bx-zoom-in cursor-pointer fs-4"
-          title="Zoom In"
-          onClick={zoomIn}
-        ></i>
-
-        <i
-          className="bx bx-zoom-out cursor-pointer fs-4"
-          title="Zoom Out"
-          onClick={zoomOut}
-        ></i>
+      {/* Top Controls */}
+      <div className="d-flex justify-content-start align-items-center mb-2">
+        {/* Left */}
+        <div className="d-flex gap-3">
+          <i
+            className="bx bx-rotate-right cursor-pointer fs-4"
+            onClick={() => setRotation((prev) => prev + 90)}
+            title="Rotate"
+          />
+          <i
+            className="bx bx-zoom-in cursor-pointer fs-4"
+            onClick={zoomIn}
+            title="Zoom In"
+          />
+          <i
+            className="bx bx-zoom-out cursor-pointer fs-4"
+            onClick={zoomOut}
+            title="Zoom Out"
+          />
+          <i
+            className="bx bx-reset cursor-pointer fs-4"
+            onClick={resetAll}
+            title="Reset"
+          />
+        </div>
       </div>
 
       <div
-        className="position-relative d-flex flex-column justify-content-center align-items-center overflow-hidden"
-        style={{ minHeight: "80vh" }}
+        onWheel={handleWheel}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+        onDoubleClick={handleDoubleClick}
+        className="position-relative d-flex justify-content-center align-items-center bg-light-secondary overflow-hidden"
+        style={{
+          minHeight: "70vh",
+          userSelect: "none",
+          borderRadius: "10px",
+        }}
       >
-        {loading && (
-          <div className="text-secondary text-center mb-2">
-            Loading...
-          </div>
-        )}
+        {loading && <div className="text-secondary">Loading...</div>}
 
-        <div className="mb-3 d-flex justify-content-center align-items-center">
-          <img
-            src={imageUrl}
-            alt="Full View"
-            className="img-fluid"
-            style={{
-              maxHeight: "80vh",
-              objectFit: "contain",
-              display: loading ? "none" : "block",
-              transform: `rotate(${rotation}deg) scale(${scale})`,
-              transition: "transform 0.3s ease",
-              cursor: "grab",
-            }}
-            onLoad={() => setLoading(false)}
-          />
+        <img
+          src={currentImage?.preSignedUrl}
+          alt="Preview"
+          draggable="false"
+          style={{
+            maxHeight: "60vh",
+            display: loading ? "none" : "block",
+            transform: `
+              translate(${position.x}px, ${position.y}px)
+              scale(${scale})
+              rotate(${rotation}deg)
+            `,
+            transition: dragging ? "none" : "transform 0.2s ease",
+            cursor: dragging ? "grabbing" : "grab",
+          }}
+          onLoad={() => setLoading(false)}
+        />
+      </div>
+
+      <div className="d-flex justify-content-between">
+        <div className="text-center text-muted mt-2 small">
+          Scroll = change image | Double click = reset
         </div>
-
-        <div className="position-absolute bottom-0 start-0 m-2">
-          <button
-            className="btn btn-outline-secondary"
-            onClick={resetAll}
-          >
-            <i className="bx bx-reset"></i> Reset
-          </button>
+        <div className="d-flex align-items-center gap-2">
+          <i
+            className="bx bx-chevron-left cursor-pointer fs-4"
+            onClick={prevImage}
+          />
+          <span>
+            {index + 1} / {images.length}
+          </span>
+          <i
+            className="bx bx-chevron-right cursor-pointer fs-4"
+            onClick={nextImage}
+          />
         </div>
       </div>
     </>
   );
 };
 
-
-
 export default PreviewDocument;
diff --git a/src/components/Expenses/ViewExpense.jsx b/src/components/Expenses/ViewExpense.jsx
index 8c032fc0..93304240 100644
--- a/src/components/Expenses/ViewExpense.jsx
+++ b/src/components/Expenses/ViewExpense.jsx
@@ -393,7 +393,7 @@ const tdsPercentage = Number(watch("tdsPercentage")) || 0;
                         if (isImage) {
                           setDocumentView({
                             IsOpen: true,
-                            Image: doc.preSignedUrl,
+                            Images: data?.documents,
                           });
                         }
                       }}
diff --git a/src/components/PaymentRequest/ManagePaymentRequest.jsx b/src/components/PaymentRequest/ManagePaymentRequest.jsx
index dcbe78af..5dfbf88b 100644
--- a/src/components/PaymentRequest/ManagePaymentRequest.jsx
+++ b/src/components/PaymentRequest/ManagePaymentRequest.jsx
@@ -239,7 +239,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
               Select Project
             </Label> */}
             {/* <select
-              className="form-select form-select-sm"
+              className="form-select "
               {...register("projectId")}
               disabled={
                 data?.recurringPayment?.isVariable && !isDraft && !isProcessed
@@ -282,7 +282,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
               Expense Category
             </Label>
             <select
-              className="form-select form-select-sm"
+              className="form-select "
               id="expenseCategoryId"
               {...register("expenseCategoryId")}
               disabled={
@@ -311,7 +311,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
         </div>
 
         {/* Title and Advance Payment  */}
-        <div className="row my-2 text-start">
+        <div className="row mt-n2 text-start">
           <div className="col-md-6">
             <Label htmlFor="title" className="form-label" required>
               Title
@@ -319,7 +319,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
             <input
               type="text"
               id="title"
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("title")}
               disabled={
                 data?.recurringPayment?.isVariable && !isDraft && !isProcessed
@@ -330,7 +330,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
             )}
           </div>
 
-          <div className="col-md-6 ">
+          <div className="col-md-6">
             <Label htmlFor="isAdvance" className="form-label">
               Is Advance Payment
             </Label>
@@ -343,7 +343,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
                 data?.recurringPayment?.isVariable && !isDraft && !isProcessed
               }
               render={({ field }) => (
-                <div className="d-flex align-items-center gap-3">
+                <div className="d-flex align-items-center gap-3 mt-3">
                   <div className="form-check d-flex flex-row m-0 gap-2">
                     <input
                       type="radio"
@@ -387,6 +387,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
               control={control}
               minDate={new Date()}
               className="w-100"
+              size="md"
               disabled={
                 data?.recurringPayment?.isVariable && !isDraft && !isProcessed
               }
@@ -404,7 +405,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
             <input
               type="number"
               id="amount"
-              className="form-control form-control-sm"
+              className="form-control "
               min="1"
               step="0.01"
               inputMode="decimal"
@@ -429,6 +430,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
                 setValue("payee", val, { shouldValidate: true })
               }
               error={errors.payee?.message}
+              size="md"
               disabled={
                 data?.recurringPayment?.isVariable && !isDraft && !isProcessed
               }
@@ -458,7 +460,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
             </Label>
             <select
               id="currencyId"
-              className="form-select form-select-sm"
+              className="form-select "
               {...register("currencyId")}
               disabled={
                 data?.recurringPayment?.isVariable && !isDraft && !isProcessed
@@ -490,7 +492,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
             </Label>
             <textarea
               id="description"
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("description")}
               rows="2"
               disabled={
diff --git a/src/components/Project/ProjectStatistics.jsx b/src/components/Project/ProjectStatistics.jsx
index 7ec5dbd3..ac7a8f2a 100644
--- a/src/components/Project/ProjectStatistics.jsx
+++ b/src/components/Project/ProjectStatistics.jsx
@@ -165,7 +165,7 @@ const ProjectStatistics = ({ project }) => {
   }, [selectedProject]);
 
   return (
-    <div className="card h-100">
+    <>
       <div className="card-header text-start">
         <h5 className="card-action-title mb-0">
           {" "}
@@ -242,8 +242,8 @@ const ProjectStatistics = ({ project }) => {
           </li>
         </ul>
       </div>
+    </>
 
-    </div>
   );
 };
 
diff --git a/src/components/RecurringExpense/ManageRecurringExpense.jsx b/src/components/RecurringExpense/ManageRecurringExpense.jsx
index a399867d..7f88c956 100644
--- a/src/components/RecurringExpense/ManageRecurringExpense.jsx
+++ b/src/components/RecurringExpense/ManageRecurringExpense.jsx
@@ -165,7 +165,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
         <div className="row my-2 text-start">
           <div className="col-md-6">
             {/* <select
-              className="form-select form-select-sm"
+              className="form-select"
               {...register("projectId")}
             >
               <option value="">Select Project</option>
@@ -201,7 +201,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
               Expense Category
             </Label>
             <select
-              className="form-select form-select-sm"
+              className="form-select"
               id="expenseCategoryId"
               {...register("expenseCategoryId")}
             >
@@ -227,7 +227,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
         </div>
 
         {/* Title and Is Variable  */}
-        <div className="row my-2 text-start">
+        <div className="row my-2 text-start mt-n2">
           <div className="col-md-6">
             <Label htmlFor="title" className="form-label" required>
               Title
@@ -235,7 +235,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             <input
               type="text"
               id="title"
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("title")}
               placeholder="Enter title"
             />
@@ -244,7 +244,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             )}
           </div>
 
-          <div className="col-md-6 mt-2">
+          <div className="col-md-6">
             <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
@@ -252,16 +252,15 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
               <HoverPopup
                 title="Payment Type"
                 id="payment_type"
+
                 content={
-                  <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 className="text-wrap" style={{ maxWidth: "200px" }}>
+                    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.
                   </div>
                 }
               >
@@ -274,7 +273,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
               control={control}
               defaultValue={defaultRecurringExpense.isVariable ?? false}
               render={({ field }) => (
-                <div className="d-flex align-items-center gap-3 mt-1">
+                <div className="d-flex align-items-center gap-3 mt-2">
                   <div className="form-check">
                     <input
                       type="radio"
@@ -327,6 +326,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
               control={control}
               minDate={new Date()}
               className="w-100"
+              size="md"
             />
             {errors.strikeDate && (
               <small className="danger-text">{errors.strikeDate.message}</small>
@@ -340,7 +340,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             <input
               type="number"
               id="amount"
-              className="form-control form-control-sm"
+              className="form-control "
               min="1"
               step="0.01"
               inputMode="decimal"
@@ -354,7 +354,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
         </div>
 
         {/* Payee and Currency  */}
-        <div className="row my-2 text-start">
+        <div className="row my-2 text-start mt-3">
           <div className="col-md-6">
             <Label htmlFor="payee" className="form-label" required>
               Payee (Supplier Name/Transporter Name/Other)
@@ -367,6 +367,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
               }
               error={errors.payee?.message}
               placeholder="Select or enter payee"
+              size="md"
             />
           </div>
 
@@ -376,7 +377,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             </Label>
             <select
               id="currencyId"
-              className="form-select form-select-sm"
+              className="form-select"
               {...register("currencyId")}
             >
               <option value="">Select Currency</option>
@@ -398,7 +399,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
         </div>
 
         {/* Frequency To and Status Id  */}
-        <div className="row my-2 text-start">
+        <div className="row my-2 text-start mt-n2">
           <div className="col-md-6">
             <div className="d-flex justify-content-start align-items-center gap-2">
               <Label htmlFor="frequency" className="form-label mb-0" required>
@@ -420,7 +421,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
 
             <select
               id="frequency"
-              className="form-select form-select-sm mt-1"
+              className="form-select mt-1"
               {...register("frequency", { valueAsNumber: true })}
             >
               <option value="">Select Frequency</option>
@@ -442,7 +443,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             </Label>
             <select
               id="statusId"
-              className="form-select form-select-sm"
+              className="form-select"
               {...register("statusId")}
             >
               <option value="">Select Status</option>
@@ -476,10 +477,10 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
                 title="Payment Buffer Days"
                 id="payment_buffer_days"
                 content={
-                  <p>
+                  <div className="text-wrap" style={{ maxWidth: "200px" }}>
                     Number of extra days allowed after the due date before
                     payment is considered late.
-                  </p>
+                  </div>
                 }
               >
                 <i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
@@ -489,7 +490,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             <input
               type="number"
               id="paymentBufferDays"
-              className="form-control form-control-sm mt-1"
+              className="form-control mt-1"
               min="0"
               step="1"
               {...register("paymentBufferDays", { valueAsNumber: true })}
@@ -511,10 +512,11 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
               <HoverPopup
                 title="End Date"
                 id="end_date"
+
                 content={
-                  <p>
+                  <div className="text-wrap" style={{ maxWidth: "200px" }}>
                     The date when the last payment in the recurrence occurs.
-                  </p>
+                  </div>
                 }
               >
                 <i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
@@ -526,6 +528,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
               control={control}
               minDate={StrikeDate}
               className="w-100 mt-1"
+              size="md"
             />
 
             {errors.endDate && (
@@ -568,7 +571,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             </Label>
             <textarea
               id="description"
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("description")}
               rows="2"
             ></textarea>
@@ -592,8 +595,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/RecurringExpense/RecurringExpenseList.jsx b/src/components/RecurringExpense/RecurringExpenseList.jsx
index a4c45fba..c1bb9e13 100644
--- a/src/components/RecurringExpense/RecurringExpenseList.jsx
+++ b/src/components/RecurringExpense/RecurringExpenseList.jsx
@@ -166,7 +166,6 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
       }
     );
   };
-console.log("Tanish",filteredData)
   return (
     <>
       {IsDeleteModalOpen && (
diff --git a/src/components/ServiceProject/ServiceProjectBranch/ServiceBranch.jsx b/src/components/ServiceProject/ServiceProjectBranch/ServiceBranch.jsx
index b33e7cce..63bdb09c 100644
--- a/src/components/ServiceProject/ServiceProjectBranch/ServiceBranch.jsx
+++ b/src/components/ServiceProject/ServiceProjectBranch/ServiceBranch.jsx
@@ -237,15 +237,17 @@ const ServiceBranch = () => {
                   !isError &&
                   (!data?.data || data.data.length === 0) && (
                     <tr>
-                      <td
-                        colSpan={columns.length + 1}
-                        className="text-center py-12"
-                        style={{ height: "200px" }}
-                      >
-                        No Branch Found
+                      <td colSpan={columns.length + 1}>
+                        <div
+                          className="d-flex justify-content-center align-items-center"
+                          style={{ height: "150px" }}
+                        >
+                          No Branch Found
+                        </div>
                       </td>
                     </tr>
                   )}
+
               </tbody>
             </table>
 
diff --git a/src/components/common/HoverPopup.jsx b/src/components/common/HoverPopup.jsx
index 1063745b..232ced5d 100644
--- a/src/components/common/HoverPopup.jsx
+++ b/src/components/common/HoverPopup.jsx
@@ -58,139 +58,66 @@ const HoverPopup = ({
     return () => document.removeEventListener("click", handler);
   }, [Mode, visible, dispatch, id]);
 
-  // Positioning effect: respects align prop and stays inside boundary (drawer)
   useEffect(() => {
     if (!visible || !popupRef.current || !triggerRef.current) return;
 
-    // run in next frame so DOM/layout settles
     requestAnimationFrame(() => {
       const popup = popupRef.current;
-
-      // choose boundary: provided boundaryRef or nearest positioned parent (popup.parentElement)
-      const boundaryEl =
-        (boundaryRef && boundaryRef.current) || popup.parentElement;
+      const boundaryEl = (boundaryRef && boundaryRef.current) || popup.parentElement;
       if (!boundaryEl) return;
 
       const boundaryRect = boundaryEl.getBoundingClientRect();
       const triggerRect = triggerRef.current.getBoundingClientRect();
-
-      // reset styles first
       popup.style.left = "";
       popup.style.right = "";
       popup.style.transform = "";
       popup.style.top = "";
 
       const popupRect = popup.getBoundingClientRect();
-      const parentRect = boundaryRect; // alias
+      const triggerCenterX = triggerRect.left + triggerRect.width / 2 - boundaryRect.left;
+      let left = triggerCenterX - popupRect.width / 2;
 
-      // Convert trigger center to parent coordinates
-      const triggerCenterX =
-        triggerRect.left + triggerRect.width / 2 - parentRect.left;
-
-      // preferred left so popup center aligns to trigger center:
-      const preferredLeft = triggerCenterX - popupRect.width / 2;
-
-      // Helpers to set styles in parent's coordinate system:
-      const setLeft = (leftPx) => {
-        popup.style.left = `${leftPx}px`;
-        popup.style.right = "auto";
-        popup.style.transform = "none";
-      };
-      const setRight = (rightPx) => {
-        popup.style.left = "auto";
-        popup.style.right = `${rightPx}px`;
-        popup.style.transform = "none";
-      };
-
-      // If user forced align:
-      if (align === "left") {
-        // align popup's left to parent's left (0)
-        setLeft(0);
-        return;
-      }
-      if (align === "right") {
-        // align popup's right to parent's right (0)
-        setRight(0);
-        return;
-      }
-      if (align === "center") {
-        popup.style.left = "50%";
-        popup.style.right = "auto";
-        popup.style.transform = "translateX(-50%)";
-        return;
-      }
-
-      // align === "auto": try preferred centered position, but flip fully if overflow
-      // clamp preferredLeft to boundaries so it doesn't render partially outside
-      const leftIfCentered = Math.max(
-        0,
-        Math.min(preferredLeft, parentRect.width - popupRect.width)
-      );
-
-      // if centered fits, use it
-      if (leftIfCentered === preferredLeft) {
-        setLeft(leftIfCentered);
-        return;
-      }
-
-      // if centering would overflow right -> stick popup fully to left (left=0)
-      if (preferredLeft > parentRect.width - popupRect.width) {
-        // place popup so its right aligns to parent's right
-        // i.e., left = parent width - popup width
-        setLeft(parentRect.width - popupRect.width);
-        return;
-      }
-
-      // if centering would overflow left -> stick popup fully to left=0
-      if (preferredLeft < 0) {
-        setLeft(0);
-        return;
-      }
-
-      // fallback center
-      setLeft(leftIfCentered);
+      // Clamp to boundaries
+      left = Math.max(0, Math.min(left, boundaryRect.width - popupRect.width));
+      popup.style.left = `${left}px`;
     });
   }, [visible, align, boundaryRef]);
 
- return (
-  <div
-    className="d-inline-block position-relative"   // <-- ADD THIS !!
-    style={{
-      maxWidth: "calc(700px - 100px)",
-      width: "100%",
-      wordWrap: "break-word",
-      overflow: "visible",   // also make sure popup isn't clipped
-    }}
-  >
+  return (
     <div
-      className="d-inline-block"
-      ref={triggerRef}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      onClick={handleClick}
-      style={{ cursor: "pointer" }}
+      className="d-inline-block position-relative"   // <-- ADD THIS !!
+      style={{ overflow: "visible" }}
     >
-      {children}
-    </div>
-
-    {visible && (
       <div
-        ref={popupRef}
-        className={`hover-popup bg-white border rounded shadow-sm p-3 position-absolute mt-2 ${className}`}
-        style={{
-          zIndex: 2000,
-          top: "100%",
-          width: "max-content",
-          minWidth: "120px",
-        }}
-        onClick={(e) => e.stopPropagation()}
+
+        ref={triggerRef}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onClick={handleClick}
+        style={{ cursor: "pointer", display: "inline-block" }}
       >
-        {title && <h6 className="fw-semibold mb-2">{title}</h6>}
-        <div>{content}</div>
+        {children}
       </div>
-    )}
-  </div>
-);
+
+      {visible && (
+        <div
+          ref={popupRef}
+          className={`hover-popup bg-white border rounded shadow-sm p-3 position-absolute mt-2 ${className}`}
+         style={{
+            zIndex: 2000,
+            top: "100%",
+            minWidth: "200px",
+            maxWidth: "300px",
+            wordWrap: "break-word",
+          }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {title && <h6 className="fw-semibold mb-2">{title}</h6>}
+          <div>{content}</div>
+        </div>
+      )}
+    </div>
+  );
 
 };
 
diff --git a/src/components/common/InputSuggestion.jsx b/src/components/common/InputSuggestion.jsx
index b586abe1..add306f8 100644
--- a/src/components/common/InputSuggestion.jsx
+++ b/src/components/common/InputSuggestion.jsx
@@ -4,6 +4,7 @@ const InputSuggestions = ({
   organizationList = [],
   value,
   onChange,
+  size = "sm",
   error,
   disabled = false,
 }) => {
@@ -27,7 +28,7 @@ const InputSuggestions = ({
   return (
     <div className="mb-3 position-relative">
       <input
-        className="form-control form-control-sm"
+        className={`form-control form-control-${size}`}
         value={value}
         onChange={handleInputChange}
         onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
@@ -57,15 +58,14 @@ const InputSuggestions = ({
                 transition: "background-color 0.2s",
               }}
               onMouseDown={() => handleSelectSuggestion(org)}
-                className={`dropdown-item ${
-                  org === value ? "active" : ""
+              className={`dropdown-item ${org === value ? "active" : ""
                 }`}
             >
               {org}
             </li>
           ))}
         </ul>
-  
+
       )}
 
       {error && <small className="danger-text">{error}</small>}
diff --git a/src/pages/Expense/ExpensePage.jsx b/src/pages/Expense/ExpensePage.jsx
index e7ac3638..d7b2b594 100644
--- a/src/pages/Expense/ExpensePage.jsx
+++ b/src/pages/Expense/ExpensePage.jsx
@@ -62,7 +62,7 @@ const ExpensePage = () => {
 
   const [ViewDocument, setDocumentView] = useState({
     IsOpen: false,
-    Image: null,
+    Images: null,
   });
 
   const IsCreatedAble = useHasUserPermission(CREATE_EXEPENSE);
@@ -208,10 +208,10 @@ const ExpensePage = () => {
           <GlobalModel
             isOpen
             size="md"
-            key={ViewDocument.Image ?? "doc"}
-            closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
+            key={ViewDocument.Images ?? "doc"}
+            closeModal={() => setDocumentView({ IsOpen: false, Images: null })}
           >
-            <PreviewDocument imageUrl={ViewDocument.Image} />
+            <PreviewDocument files={ViewDocument.Images} />
           </GlobalModel>
         )}
       </div>
diff --git a/src/pages/project/ProjectDetails.jsx b/src/pages/project/ProjectDetails.jsx
index 298e95fb..b8ab45d6 100644
--- a/src/pages/project/ProjectDetails.jsx
+++ b/src/pages/project/ProjectDetails.jsx
@@ -24,6 +24,9 @@ import { useProjectAccess } from "../../hooks/useProjectAccess";
 
 import "./ProjectDetails.css";
 import ProjectOrganizations from "../../components/Project/ProjectOrganizations";
+import ProjectStatistics from "../../components/Project/ProjectStatistics";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import { REGULARIZE_ATTENDANCE, SELF_ATTENDANCE, TEAM_ATTENDANCE } from "../../utils/constants";
 
 const ProjectDetails = () => {
   const projectId = useSelectedProject();
@@ -34,6 +37,10 @@ const ProjectDetails = () => {
     useProjectDetails(projectId);
 
   const { canView, loading: permsLoading } = useProjectAccess(projectId);
+  const canRegularize = useHasUserPermission(REGULARIZE_ATTENDANCE);
+  const canTeamAttendance = useHasUserPermission(TEAM_ATTENDANCE);
+  const canSelfAttendance = useHasUserPermission(SELF_ATTENDANCE);
+
 
   useEffect(() => {
     if (!projectId && projectNames.length > 0) {
@@ -82,13 +89,16 @@ const ProjectDetails = () => {
           <div className="row">
             <div className="col-lg-4 col-md-5 mt-2">
               <AboutProject />
-              <ProjectOverview project={projectId} />
+              <div className="card"><ProjectStatistics project={projectId} /></div>
             </div>
+
             <div className="col-lg-8 col-md-7 mt-2">
               <ProjectProgressChart ShowAllProject="false" DefaultRange="1M" />
-              <div className="mt-5">
-                <AttendanceOverview />
-              </div>
+              {(canRegularize || canTeamAttendance || canSelfAttendance) && (
+                <div className="mt-5">
+                  <AttendanceOverview />
+                </div>
+              )}
             </div>
           </div>
         );