diff --git a/src/components/Expenses/ExpenseStatusLogs.jsx b/src/components/Expenses/ExpenseStatusLogs.jsx
index db9ac0cc..83ee2e3a 100644
--- a/src/components/Expenses/ExpenseStatusLogs.jsx
+++ b/src/components/Expenses/ExpenseStatusLogs.jsx
@@ -8,11 +8,11 @@ const ExpenseStatusLogs = ({ data }) => {
   const [visibleCount, setVisibleCount] = useState(4);
 
   const sortedLogs = useMemo(() => {
-    if (!data?.updateLogs) return [];
-    return [...data.updateLogs].sort(
+    if (!data?.expenseLogs) return [];
+    return [...data.expenseLogs].sort(
       (a, b) => new Date(b.updatedAt) - new Date(a.updatedAt)
     );
-  }, [data?.updateLogs]);
+  }, [data?.expenseLogs]);
 
   const logsToShow = useMemo(
     () => sortedLogs.slice(0, visibleCount),
@@ -22,8 +22,8 @@ const ExpenseStatusLogs = ({ data }) => {
   const timelineData = useMemo(() => {
     return logsToShow.map((log, index) => ({
       id: index + 1,
-      title: log.nextStatus?.name || "Status Updated",
-      description: log.nextStatus?.description || "",
+      title: log.action || "Status Updated",
+      description: log.comment || "",
       timeAgo: log.updatedAt,
       color: getColorNameFromHex(log.nextStatus?.color) || "primary",
       users: log.updatedBy
@@ -45,45 +45,7 @@ const ExpenseStatusLogs = ({ data }) => {
 
   return (
     <div className="page-min-h overflow-auto">
-      {/* <div className="row g-2">
-        {logsToShow.map((log) => (
-          <div key={log.id} className="col-12 d-flex align-items-start mb-1">
-            <Avatar
-              size="xs"
-              firstName={log.updatedBy.firstName}
-              lastName={log.updatedBy.lastName}
-            />
-
-            <div className="flex-grow-1">
-              <div className="text-start">
-                <div className="flex">
-                  <span>{`${log.updatedBy.firstName} ${log.updatedBy.lastName}`}</span>
-                  <small className="text-secondary text-tiny ms-2">
-                    <em>{log.action}</em>
-                  </small>
-                  <span className="text-tiny text-secondary d-block">
-                    {formatUTCToLocalTime(log.updateAt, true)}
-                  </span>
-                </div>
-                <div className="d-flex align-items-center text-muted small mt-1">
-                  <span>{log.comment}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {sortedLogs.length > visibleCount && (
-        <div className="text-center my-1">
-          <button
-            className="btn btn-xs btn-outline-primary"
-            onClick={handleShowMore}
-          >
-            Show More
-          </button>
-        </div>
-      )} */}
+     
 
       <Timeline items={timelineData} />
     </div>
diff --git a/src/components/Expenses/Filelist.jsx b/src/components/Expenses/Filelist.jsx
index e67830b4..41f52bd2 100644
--- a/src/components/Expenses/Filelist.jsx
+++ b/src/components/Expenses/Filelist.jsx
@@ -1,9 +1,10 @@
 import React from "react";
 import { formatFileSize, getIconByFileType } from "../../utils/appUtils";
+import Tooltip from "../common/Tooltip";
 
 const Filelist = ({ files, removeFile, expenseToEdit }) => {
   return (
-    <div className="d-block">
+    <div className="d-flex flex-wrap gap-2 mt-2">
       {files
         .filter((file) => {
           if (expenseToEdit) {
@@ -12,7 +13,7 @@ const Filelist = ({ files, removeFile, expenseToEdit }) => {
           return true;
         })
         .map((file, idx) => (
-          <div className="col-12 col-sm-6 col-md-4 col-lg-8 bg-white shadow-sm rounded p-2 m-2" key={idx}>
+          <div className="col-12 col-sm-6 col-md-4  bg-white  " key={idx}>
             <div className="row align-items-center">
               {/* File icon and info */}
               <div className="col-10 d-flex align-items-center gap-2">
@@ -34,7 +35,8 @@ const Filelist = ({ files, removeFile, expenseToEdit }) => {
               </div>
 
               <div className="col-2 text-end">
-                <i
+                <Tooltip text={"Remove file"}>
+                  <i
                   className="bx bx-trash fs-4 cursor-pointer text-danger bx-sm  "
                   role="button"
                   onClick={(e) => {
@@ -42,6 +44,8 @@ const Filelist = ({ files, removeFile, expenseToEdit }) => {
                     removeFile(expenseToEdit ? file.documentId : idx);
                   }}
                 ></i>
+                </Tooltip>
+                
               </div>
             </div>
           </div>
diff --git a/src/components/Expenses/ViewExpense.jsx b/src/components/Expenses/ViewExpense.jsx
index ac5963cd..3e2a2756 100644
--- a/src/components/Expenses/ViewExpense.jsx
+++ b/src/components/Expenses/ViewExpense.jsx
@@ -9,7 +9,11 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { defaultActionValues, ExpenseActionScheam } from "./ExpenseSchema";
 import { useExpenseContext } from "../../pages/Expense/ExpensePage";
-import { getColorNameFromHex, getIconByFileType, localToUtc } from "../../utils/appUtils";
+import {
+  getColorNameFromHex,
+  getIconByFileType,
+  localToUtc,
+} from "../../utils/appUtils";
 import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import {
@@ -38,7 +42,8 @@ const ViewExpense = ({ ExpenseId }) => {
   const IsReview = useHasUserPermission(REVIEW_EXPENSE);
   const [imageLoaded, setImageLoaded] = useState({});
   const { setDocumentView } = useExpenseContext();
-  const ActionSchema = ExpenseActionScheam(IsPaymentProcess,data?.createdAt) ?? z.object({});
+  const ActionSchema =
+    ExpenseActionScheam(IsPaymentProcess, data?.createdAt) ?? z.object({});
   const navigate = useNavigate();
   const {
     register,
@@ -91,7 +96,7 @@ const ViewExpense = ({ ExpenseId }) => {
   const onSubmit = (formData) => {
     const Payload = {
       ...formData,
-      reimburseDate:localToUtc(formData.reimburseDate),
+      reimburseDate: localToUtc(formData.reimburseDate),
       expenseId: ExpenseId,
       comment: formData.comment,
     };
@@ -106,362 +111,379 @@ const ViewExpense = ({ ExpenseId }) => {
 
   return (
     <form className="container px-3" onSubmit={handleSubmit(onSubmit)}>
+      <div className="col-12 mb-1">
+        <h5 className="fw-semibold m-0">Expense Details</h5>
+      </div>
       <div className="row mb-1">
-        <div className="col-12 mb-1">
-          <h5 className="fw-semibold m-0">Expense Details</h5>
-          <hr />
-        </div>
-         <div className="col-12 text-start fw-semibold my-2">{data?.expenseUId}</div>
-        {/* Row 1 */}
-        <div className="col-md-6 mb-3">
-          <div className="d-flex">
-            <label
-              className="form-label me-2 mb-0 fw-semibold text-start"
-              style={{ minWidth: "130px" }}
-            >
-              Transaction Date :
-            </label>
-            <div className="text-muted">
-              {formatUTCToLocalTime(data?.transactionDate)}
+        <div className="col-12 col-md-7">
+          <div className="row">
+            <div className="col-12 text-start fw-semibold my-2">
+              {data?.expenseUId}
             </div>
-          </div>
-        </div>
-        <div className="col-md-6 mb-3">
-          <div className="d-flex">
-            <label
-              className="form-label me-2 mb-0 fw-semibold text-start"
-              style={{ minWidth: "130px" }}
-            >
-              Expense Type :
-            </label>
-            <div className="text-muted">{data?.expensesType?.name}</div>
-          </div>
-        </div>
-
-        {/* Row 2 */}
-        <div className="col-md-6 mb-3">
-          <div className="d-flex">
-            <label
-              className="form-label me-2 mb-0 fw-semibold text-start"
-              style={{ minWidth: "130px" }}
-            >
-              Supplier :
-            </label>
-            <div className="text-muted">{data?.supplerName}</div>
-          </div>
-        </div>
-        <div className="col-md-6 mb-3">
-          <div className="d-flex">
-            <label
-              className="form-label me-2 mb-0 fw-semibold text-start"
-              style={{ minWidth: "130px" }}
-            >
-              Amount :
-            </label>
-            <div className="text-muted">₹ {data.amount}</div>
-          </div>
-        </div>
-
-        {/* Row 3 */}
-        <div className="col-md-6 mb-3">
-          <div className="d-flex">
-            <label
-              className="form-label me-2 mb-0 fw-semibold text-start"
-              style={{ minWidth: "130px" }}
-            >
-              Payment Mode :
-            </label>
-            <div className="text-muted">{data?.paymentMode?.name}</div>
-          </div>
-        </div>
-        {data?.gstNumber && (
-          <div className="col-md-6 mb-3">
-            <div className="d-flex">
-              <label
-                className="form-label me-2 mb-0 fw-semibold text-start"
-                style={{ minWidth: "130px" }}
-              >
-                GST Number :
-              </label>
-              <div className="text-muted">{data?.gstNumber}</div>
-            </div>
-          </div>
-        )}
-
-        {/* Row 4 */}
-        <div className="col-md-6 mb-3">
-          <div className="d-flex">
-            <label
-              className="form-label me-2 mb-0 fw-semibold text-start"
-              style={{ minWidth: "130px" }}
-            >
-              Status :
-            </label>
-            <span
-              className={`badge bg-label-${
-                getColorNameFromHex(data?.status?.color) || "secondary"
-              }`}
-            >
-              {data?.status?.name}
-            </span>
-          </div>
-        </div>
-        <div className="col-md-6 mb-3">
-          <div className="d-flex">
-            <label
-              className="form-label me-2 mb-0 fw-semibold text-start"
-              style={{ minWidth: "130px" }}
-            >
-              Pre-Approved :
-            </label>
-            <div className="text-muted">{data.preApproved ? "Yes" : "No"}</div>
-          </div>
-        </div>
-
-        <div className="col-md-6 mb-3">
-          <div className="d-flex">
-            <label
-              className="form-label me-2 mb-0 fw-semibold text-start"
-              style={{ minWidth: "130px" }}
-            >
-              Project :
-            </label>
-            <div className="text-muted">{data?.project?.name}</div>
-          </div>
-        </div>
-        <div className="col-md-6 mb-3">
-          <div className="d-flex">
-            <label
-              className="form-label me-2 mb-0 fw-semibold text-start"
-              style={{ minWidth: "130px" }}
-            >
-              Created At :
-            </label>
-            <div className="text-muted">
-              {formatUTCToLocalTime(data?.createdAt, true)}
-            </div>
-          </div>
-        </div>
-
-        {/* Row 6 */}
-        {data.createdBy && (
-          <div className="col-md-6 text-start">
-            <div className="d-flex align-items-center">
-              <label
-                className="form-label me-2 mb-0 fw-semibold"
-                style={{ minWidth: "130px" }}
-              >
-                Created By :
-              </label>
-              <div className="d-flex align-items-center">
-                <Avatar
-                  size="xs"
-                  classAvatar="m-0"
-                  firstName={data.createdBy?.firstName}
-                  lastName={data.createdBy?.lastName}
-                />
-                <span className="text-muted">
-                  {`${data.createdBy?.firstName ?? ""} ${
-                    data.createdBy?.lastName ?? ""
-                  }`.trim() || "N/A"}
-                </span>
-              </div>
-            </div>
-          </div>
-        )}
-        <div className="col-md-6 text-start">
-          <div className="d-flex align-items-center">
-            <label
-              className="form-label me-2 mb-0 fw-semibold"
-              style={{ minWidth: "130px" }}
-            >
-              Paid By :
-            </label>
-            <div className="d-flex align-items-center ">
-              <Avatar
-                size="xs"
-                classAvatar="m-0"
-                firstName={data.paidBy?.firstName}
-                lastName={data.paidBy?.lastName}
-              />
-              <span className="text-muted">
-                {`${data.paidBy?.firstName ?? ""} ${
-                  data.paidBy?.lastName ?? ""
-                }`.trim() || "N/A"}
-              </span>
-            </div>
-          </div>
-        </div>
-        
-          <div className="text-start my-1">
-            <label className="fw-semibold form-label">Description : </label>
-          <div className="text-muted">{data?.description}</div>
-        </div>
-      </div>
-
-      <div className="col-12 text-start">
-        <label className="form-label me-2 mb-2 fw-semibold">Attachment :</label>
-
-        <div className="d-flex flex-wrap gap-2">
-          {data?.documents?.map((doc) => {
-            const isImage = doc.contentType?.includes("image");
-
-            return (
-              <div
-                key={doc.documentId}
-                className="border rounded  hover-scale p-2 d-flex flex-column align-items-center"
-                style={{
-                  width: "80px",
-                  cursor: isImage ? "pointer" : "default",
-                }}
-                onClick={() => {
-                  if (isImage) {
-                    setDocumentView({
-                      IsOpen: true,
-                      Image: doc.preSignedUrl,
-                    });
-                  }
-                }}
-              >
-                <i
-                  className={`bx ${getIconByFileType(doc.contentType)}`}
-                  style={{ fontSize: "30px" }}
-                ></i>
-                <small
-                  className="text-center text-tiny text-truncate w-100"
-                  title={doc.fileName}
+            {/* Row 1 */}
+            <div className="col-md-6 mb-3">
+              <div className="d-flex">
+                <label
+                  className="form-label me-2 mb-0 fw-semibold text-start"
+                  style={{ minWidth: "130px" }}
                 >
-                  {doc.fileName}
-                </small>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-
-      {data.expensesReimburse && (
-        <div className="row text-start mt-2">
-          <div className="col-md-6 mb-sm-0 mb-2">
-            <label className="form-label me-2 mb-0 fw-semibold">
-              Transaction ID :
-            </label>
-            {data.expensesReimburse.reimburseTransactionId || "N/A"}
-          </div>
-          <div className="col-md-6 ">
-            <label className="form-label me-2 mb-0 fw-semibold">
-              Reimburse Date :
-            </label>
-            {formatUTCToLocalTime(data.expensesReimburse.reimburseDate)}
-          </div>
-
-          {data.expensesReimburse && (
-            <>
-              <div className="col-md-6  d-flex align-items-center">
-                <label className="form-label me-2 mb-0 fw-semibold">
-                  Reimburse By :
+                  Transaction Date :
                 </label>
-                <Avatar
-                  size="xs"
-                  classAvatar="m-0 me-1"
-                  firstName={data?.expensesReimburse?.reimburseBy?.firstName}
-                  lastName={data?.expensesReimburse?.reimburseBy?.lastName}
-                />
-                <span className="text-muted">
-                  {`${data?.expensesReimburse?.reimburseBy?.firstName} ${data?.expensesReimburse?.reimburseBy?.lastName}`.trim()}
-                </span>
-              </div>
-            </>
-          )}
-        </div>
-      )}
-      <hr className="divider my-1 border-2 divider-primary my-2" />
-
-      {Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
-        <>
-          {IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
-            <div className="row">
-              <div className="col-12 col-md-6 text-start">
-                <label className="form-label">Transaction Id </label>
-                <input
-                  type="text"
-                  className="form-control form-control-sm"
-                  {...register("reimburseTransactionId")}
-                />
-                {errors.reimburseTransactionId && (
-                  <small className="danger-text">
-                    {errors.reimburseTransactionId.message}
-                  </small>
-                )}
-              </div>
-              <div className="col-12 col-md-6 text-start">
-                <label className="form-label">Transaction Date </label>
-                <DatePicker
-                  name="reimburseDate"
-                  control={control}
-                  minDate={data?.createdAt}
-                  maxDate={new Date()}
-                />
-                {errors.reimburseDate && (
-                  <small className="danger-text">
-                    {errors.reimburseDate.message}
-                  </small>
-                )}
-              </div>
-              <div className="col-12 col-md-6 text-start">
-                <label className="form-label">Reimburse By </label>
-                <EmployeeSearchInput
-                  control={control}
-                  name="reimburseById"
-                  projectId={null}                
-                />
+                <div className="text-muted">
+                  {formatUTCToLocalTime(data?.transactionDate)}
+                </div>
               </div>
             </div>
-          )}
-          <div className="col-12 mb-3 text-start">
-            {((nextStatusWithPermission.length > 0 && !IsRejectedExpense) ||
-              (IsRejectedExpense && isCreatedBy)) && (
-              <>
-                <Label className="form-label me-2 mb-0" required>Comment</Label>
-                <textarea
-                  className="form-control form-control-sm"
-                  {...register("comment")}
-                  rows="2"
-                />
-                {errors.comment && (
-                  <small className="danger-text">
-                    {errors.comment.message}
-                  </small>
-                )}
-              </>
+            <div className="col-md-6 mb-3">
+              <div className="d-flex">
+                <label
+                  className="form-label me-2 mb-0 fw-semibold text-start"
+                  style={{ minWidth: "130px" }}
+                >
+                  Expense Type :
+                </label>
+                <div className="text-muted">{data?.expensesType?.name}</div>
+              </div>
+            </div>
+
+            {/* Row 2 */}
+            <div className="col-md-6 mb-3">
+              <div className="d-flex">
+                <label
+                  className="form-label me-2 mb-0 fw-semibold text-start"
+                  style={{ minWidth: "130px" }}
+                >
+                  Supplier :
+                </label>
+                <div className="text-muted">{data?.supplerName}</div>
+              </div>
+            </div>
+            <div className="col-md-6 mb-3">
+              <div className="d-flex">
+                <label
+                  className="form-label me-2 mb-0 fw-semibold text-start"
+                  style={{ minWidth: "130px" }}
+                >
+                  Amount :
+                </label>
+                <div className="text-muted">₹ {data.amount}</div>
+              </div>
+            </div>
+
+            {/* Row 3 */}
+            <div className="col-md-6 mb-3">
+              <div className="d-flex">
+                <label
+                  className="form-label me-2 mb-0 fw-semibold text-start"
+                  style={{ minWidth: "130px" }}
+                >
+                  Payment Mode :
+                </label>
+                <div className="text-muted">{data?.paymentMode?.name}</div>
+              </div>
+            </div>
+            {data?.gstNumber && (
+              <div className="col-md-6 mb-3">
+                <div className="d-flex">
+                  <label
+                    className="form-label me-2 mb-0 fw-semibold text-start"
+                    style={{ minWidth: "130px" }}
+                  >
+                    GST Number :
+                  </label>
+                  <div className="text-muted">{data?.gstNumber}</div>
+                </div>
+              </div>
             )}
 
-            {nextStatusWithPermission?.length > 0 &&
-              (!IsRejectedExpense || isCreatedBy) && (
-                <div className="text-end flex-wrap gap-2 my-2 mt-3">
-                  {nextStatusWithPermission.map((status, index) => (
-                    <button
-                      key={status.id || index}
-                      type="button"
-                      onClick={() => {
-                      setClickedStatusId(status.id);
-                        setValue("statusId", status.id);
-                        handleSubmit(onSubmit)();
-                      }}
-                      disabled={isPending || isFetching}
-                      className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
-                    >
-                      {isPending && clickedStatusId === status.id
-                        ? "Please Wait..."
-                        : status.displayName || status.name}
-                    </button>
-                  ))}
+            {/* Row 4 */}
+            <div className="col-md-6 mb-3">
+              <div className="d-flex">
+                <label
+                  className="form-label me-2 mb-0 fw-semibold text-start"
+                  style={{ minWidth: "130px" }}
+                >
+                  Status :
+                </label>
+                <span
+                  className={`badge bg-label-${
+                    getColorNameFromHex(data?.status?.color) || "secondary"
+                  }`}
+                >
+                  {data?.status?.name}
+                </span>
+              </div>
+            </div>
+            <div className="col-md-6 mb-3">
+              <div className="d-flex">
+                <label
+                  className="form-label me-2 mb-0 fw-semibold text-start"
+                  style={{ minWidth: "130px" }}
+                >
+                  Pre-Approved :
+                </label>
+                <div className="text-muted">
+                  {data.preApproved ? "Yes" : "No"}
                 </div>
-              )}
-          </div>
-        </>
-      )}
+              </div>
+            </div>
 
-      <ExpenseStatusLogs data={data} />
+            <div className="col-md-6 mb-3">
+              <div className="d-flex">
+                <label
+                  className="form-label me-2 mb-0 fw-semibold text-start"
+                  style={{ minWidth: "130px" }}
+                >
+                  Project :
+                </label>
+                <div className="text-muted">{data?.project?.name}</div>
+              </div>
+            </div>
+            <div className="col-md-6 mb-3">
+              <div className="d-flex">
+                <label
+                  className="form-label me-2 mb-0 fw-semibold text-start"
+                  style={{ minWidth: "130px" }}
+                >
+                  Created At :
+                </label>
+                <div className="text-muted">
+                  {formatUTCToLocalTime(data?.createdAt, true)}
+                </div>
+              </div>
+            </div>
+
+            {/* Row 6 */}
+            {data.createdBy && (
+              <div className="col-md-6 text-start">
+                <div className="d-flex align-items-center">
+                  <label
+                    className="form-label me-2 mb-0 fw-semibold"
+                    style={{ minWidth: "130px" }}
+                  >
+                    Created By :
+                  </label>
+                  <div className="d-flex align-items-center">
+                    <Avatar
+                      size="xs"
+                      classAvatar="m-0"
+                      firstName={data.createdBy?.firstName}
+                      lastName={data.createdBy?.lastName}
+                    />
+                    <span className="text-muted">
+                      {`${data.createdBy?.firstName ?? ""} ${
+                        data.createdBy?.lastName ?? ""
+                      }`.trim() || "N/A"}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            )}
+            <div className="col-md-6 text-start">
+              <div className="d-flex align-items-center">
+                <label
+                  className="form-label me-2 mb-0 fw-semibold"
+                  style={{ minWidth: "130px" }}
+                >
+                  Paid By :
+                </label>
+                <div className="d-flex align-items-center ">
+                  <Avatar
+                    size="xs"
+                    classAvatar="m-0"
+                    firstName={data.paidBy?.firstName}
+                    lastName={data.paidBy?.lastName}
+                  />
+                  <span className="text-muted">
+                    {`${data.paidBy?.firstName ?? ""} ${
+                      data.paidBy?.lastName ?? ""
+                    }`.trim() || "N/A"}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className="text-start my-1">
+              <label className="fw-semibold form-label">Description : </label>
+              <div className="text-muted">{data?.description}</div>
+            </div>
+
+            <div className="col-12 text-start">
+              <label className="form-label me-2 mb-2 fw-semibold">
+                Attachment :
+              </label>
+
+              <div className="d-flex flex-wrap gap-2">
+                {data?.documents?.map((doc) => {
+                  const isImage = doc.contentType?.includes("image");
+
+                  return (
+                    <div
+                      key={doc.documentId}
+                      className="border rounded  hover-scale p-2 d-flex flex-column align-items-center"
+                      style={{
+                        width: "80px",
+                        cursor: isImage ? "pointer" : "default",
+                      }}
+                      onClick={() => {
+                        if (isImage) {
+                          setDocumentView({
+                            IsOpen: true,
+                            Image: doc.preSignedUrl,
+                          });
+                        }
+                      }}
+                    >
+                      <i
+                        className={`bx ${getIconByFileType(doc.contentType)}`}
+                        style={{ fontSize: "30px" }}
+                      ></i>
+                      <small
+                        className="text-center text-tiny text-truncate w-100"
+                        title={doc.fileName}
+                      >
+                        {doc.fileName}
+                      </small>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+
+            {data.expensesReimburse && (
+              <div className="row text-start mt-2">
+                <div className="col-md-6 mb-sm-0 mb-2">
+                  <label className="form-label me-2 mb-0 fw-semibold">
+                    Transaction ID :
+                  </label>
+                  {data.expensesReimburse.reimburseTransactionId || "N/A"}
+                </div>
+                <div className="col-md-6 ">
+                  <label className="form-label me-2 mb-0 fw-semibold">
+                    Reimburse Date :
+                  </label>
+                  {formatUTCToLocalTime(data.expensesReimburse.reimburseDate)}
+                </div>
+
+                {data.expensesReimburse && (
+                  <>
+                    <div className="col-md-6  d-flex align-items-center">
+                      <label className="form-label me-2 mb-0 fw-semibold">
+                        Reimburse By :
+                      </label>
+                      <Avatar
+                        size="xs"
+                        classAvatar="m-0 me-1"
+                        firstName={
+                          data?.expensesReimburse?.reimburseBy?.firstName
+                        }
+                        lastName={
+                          data?.expensesReimburse?.reimburseBy?.lastName
+                        }
+                      />
+                      <span className="text-muted">
+                        {`${data?.expensesReimburse?.reimburseBy?.firstName} ${data?.expensesReimburse?.reimburseBy?.lastName}`.trim()}
+                      </span>
+                    </div>
+                  </>
+                )}
+              </div>
+            )}
+            {Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
+              <>
+                {IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
+                  <div className="row">
+                    <div className="col-12 col-md-6 text-start">
+                      <label className="form-label">Transaction Id </label>
+                      <input
+                        type="text"
+                        className="form-control form-control-sm"
+                        {...register("reimburseTransactionId")}
+                      />
+                      {errors.reimburseTransactionId && (
+                        <small className="danger-text">
+                          {errors.reimburseTransactionId.message}
+                        </small>
+                      )}
+                    </div>
+                    <div className="col-12 col-md-6 text-start">
+                      <label className="form-label">Transaction Date </label>
+                      <DatePicker
+                        name="reimburseDate"
+                        control={control}
+                        minDate={data?.createdAt}
+                        maxDate={new Date()}
+                      />
+                      {errors.reimburseDate && (
+                        <small className="danger-text">
+                          {errors.reimburseDate.message}
+                        </small>
+                      )}
+                    </div>
+                    <div className="col-12 col-md-6 text-start">
+                      <label className="form-label">Reimburse By </label>
+                      <EmployeeSearchInput
+                        control={control}
+                        name="reimburseById"
+                        projectId={null}
+                      />
+                    </div>
+                  </div>
+                )}
+                <div className="col-12 mb-3 text-start">
+                  {((nextStatusWithPermission.length > 0 &&
+                    !IsRejectedExpense) ||
+                    (IsRejectedExpense && isCreatedBy)) && (
+                    <>
+                      <Label className="form-label me-2 mb-0" required>
+                        Comment
+                      </Label>
+                      <textarea
+                        className="form-control form-control-sm"
+                        {...register("comment")}
+                        rows="2"
+                      />
+                      {errors.comment && (
+                        <small className="danger-text">
+                          {errors.comment.message}
+                        </small>
+                      )}
+                    </>
+                  )}
+
+                  {nextStatusWithPermission?.length > 0 &&
+                    (!IsRejectedExpense || isCreatedBy) && (
+                      <div className="text-end flex-wrap gap-2 my-2 mt-3">
+                        {nextStatusWithPermission.map((status, index) => (
+                          <button
+                            key={status.id || index}
+                            type="button"
+                            onClick={() => {
+                              setClickedStatusId(status.id);
+                              setValue("statusId", status.id);
+                              handleSubmit(onSubmit)();
+                            }}
+                            disabled={isPending || isFetching}
+                            className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
+                          >
+                            {isPending && clickedStatusId === status.id
+                              ? "Please Wait..."
+                              : status.displayName || status.name}
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+        <div className="col-12 col-md-5">
+          <div className="row">
+            <ExpenseStatusLogs data={data} />
+          </div>
+        </div>
+      </div>
     </form>
   );
 };
diff --git a/src/components/PaymentRequest/PaymentStatusLogs.jsx b/src/components/PaymentRequest/PaymentStatusLogs.jsx
new file mode 100644
index 00000000..9abb3fa5
--- /dev/null
+++ b/src/components/PaymentRequest/PaymentStatusLogs.jsx
@@ -0,0 +1,93 @@
+import { useState, useMemo } from "react";
+import Avatar from "../common/Avatar";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import Timeline from "../common/TimeLine";
+import moment from "moment";
+import { getColorNameFromHex } from "../../utils/appUtils";
+const PaymentStatusLogs = ({ data }) => {
+  const [visibleCount, setVisibleCount] = useState(4);
+
+  const sortedLogs = useMemo(() => {
+    if (!data?.updateLogs) return [];
+    return [...data.updateLogs].sort(
+      (a, b) => new Date(b.updatedAt) - new Date(a.updatedAt)
+    );
+  }, [data?.updateLogs]);
+
+  const logsToShow = useMemo(
+    () => sortedLogs.slice(0, visibleCount),
+    [sortedLogs, visibleCount]
+  );
+
+  const timelineData = useMemo(() => {
+    return logsToShow.map((log, index) => ({
+      id: index + 1,
+      title: log.nextStatus?.name || "Status Updated",
+      description: log.nextStatus?.description || "",
+      timeAgo: log.updatedAt,
+      color: getColorNameFromHex(log.nextStatus?.color) || "primary",
+      users: log.updatedBy
+        ? [
+            {
+              firstName: log.updatedBy.firstName || "",
+              lastName: log?.updatedBy?.lastName || "",
+              role: log.updatedBy.jobRoleName || "",
+              avatar: log.updatedBy.photo,
+            },
+          ]
+        : [],
+    }));
+  }, [logsToShow]);
+
+  const handleShowMore = () => {
+    setVisibleCount((prev) => prev + 4);
+  };
+
+  return (
+    <div className="page-min-h overflow-auto">
+      {/* <div className="row g-2">
+        {logsToShow.map((log) => (
+          <div key={log.id} className="col-12 d-flex align-items-start mb-1">
+            <Avatar
+              size="xs"
+              firstName={log.updatedBy.firstName}
+              lastName={log.updatedBy.lastName}
+            />
+
+            <div className="flex-grow-1">
+              <div className="text-start">
+                <div className="flex">
+                  <span>{`${log.updatedBy.firstName} ${log.updatedBy.lastName}`}</span>
+                  <small className="text-secondary text-tiny ms-2">
+                    <em>{log.action}</em>
+                  </small>
+                  <span className="text-tiny text-secondary d-block">
+                    {formatUTCToLocalTime(log.updateAt, true)}
+                  </span>
+                </div>
+                <div className="d-flex align-items-center text-muted small mt-1">
+                  <span>{log.comment}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {sortedLogs.length > visibleCount && (
+        <div className="text-center my-1">
+          <button
+            className="btn btn-xs btn-outline-primary"
+            onClick={handleShowMore}
+          >
+            Show More
+          </button>
+        </div>
+      )} */}
+
+      <Timeline items={timelineData} />
+    </div>
+  );
+};
+
+export default PaymentStatusLogs;
diff --git a/src/components/PaymentRequest/ViewPaymentRequest.jsx b/src/components/PaymentRequest/ViewPaymentRequest.jsx
index debea3e0..becf950f 100644
--- a/src/components/PaymentRequest/ViewPaymentRequest.jsx
+++ b/src/components/PaymentRequest/ViewPaymentRequest.jsx
@@ -38,6 +38,7 @@ import {
   defaultPaymentRequestActionValues,
   PaymentRequestActionScheam,
 } from "./PaymentRequestSchema";
+import PaymentStatusLogs from "./PaymentStatusLogs";
 
 const ViewPaymentRequest = ({ requestId }) => {
   const { data, isLoading, isError, error, isFetching } =
@@ -474,7 +475,7 @@ const ViewPaymentRequest = ({ requestId }) => {
             <i className="bx bx-time-five me-2 "></i>{" "}
             <p className="fw-medium">TimeLine</p>
           </div>
-          <ExpenseStatusLogs data={data} />
+          <PaymentStatusLogs data={data} />
         </div>
       </div>
     </form>
diff --git a/src/pages/Expense/ExpensePage.jsx b/src/pages/Expense/ExpensePage.jsx
index 8c495a11..a50644e8 100644
--- a/src/pages/Expense/ExpensePage.jsx
+++ b/src/pages/Expense/ExpensePage.jsx
@@ -196,7 +196,7 @@ const ExpensePage = () => {
         {viewExpense.view && (
           <GlobalModel
             isOpen
-            size="lg"
+            size="xl"
             modalType="top"
             closeModal={() => setViewExpense({ expenseId: null, view: false })}
           >