diff --git a/src/components/Expenses/ViewExpense.jsx b/src/components/Expenses/ViewExpense.jsx
index 9c3b24a2..f6aeb09e 100644
--- a/src/components/Expenses/ViewExpense.jsx
+++ b/src/components/Expenses/ViewExpense.jsx
@@ -1,5 +1,9 @@
 import React, { useState, useMemo } from "react";
-import { useActionOnExpense, useExpense, useHasAnyPermission } from "../../hooks/useExpense";
+import {
+  useActionOnExpense,
+  useExpense,
+  useHasAnyPermission,
+} from "../../hooks/useExpense";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -11,12 +15,14 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { REVIEW_EXPENSE } from "../../utils/constants";
 import { useProfile } from "../../hooks/useProfile";
 import { useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
 
 const ViewExpense = ({ ExpenseId }) => {
   const { data, isLoading, isError, error } = useExpense(ExpenseId);
   const IsReview = useHasUserPermission(REVIEW_EXPENSE);
   const [imageLoaded, setImageLoaded] = useState({});
   const { setDocumentView } = useExpenseContext();
+  const navigate = useNavigate();
   const {
     register,
     handleSubmit,
@@ -30,27 +36,24 @@ const ViewExpense = ({ ExpenseId }) => {
       selectedStatus: "",
     },
   });
- 
-const userPermissions = useSelector(
-  (state) => state?.globalVariables?.loginUser?.featurePermissions || []
-);
 
+  const userPermissions = useSelector(
+    (state) => state?.globalVariables?.loginUser?.featurePermissions || []
+  );
 
-const nextStatusWithPermission = useMemo(() => {
-  if (!Array.isArray(data?.nextStatus)) return [];
+  const nextStatusWithPermission = useMemo(() => {
+    if (!Array.isArray(data?.nextStatus)) return [];
 
-  return data.nextStatus.filter((status) => {
-    const permissionIds = Array.isArray(status?.permissionIds)
-      ? status.permissionIds
-      : [];
-
-    if (permissionIds.length === 0) return true;
-
-    return permissionIds.some((id) => userPermissions.includes(id));
-  });
-}, [data, userPermissions]);
+    return data.nextStatus.filter((status) => {
+      const permissionIds = Array.isArray(status?.permissionIds)
+        ? status.permissionIds
+        : [];
 
+      if (permissionIds.length === 0) return true;
 
+      return permissionIds.some((id) => userPermissions.includes(id));
+    });
+  }, [data, userPermissions]);
 
   const { mutate: MakeAction } = useActionOnExpense(() => reset());
 
@@ -189,12 +192,27 @@ const nextStatusWithPermission = useMemo(() => {
         <label className="form-label me-2 mb-0 fw-semibold">Description:</label>
         <div className="text-muted">{data?.description}</div>
       </div>
-      <div className="col-12 my-2 text-start ">
-        <label className="form-label me-2 mb-0 fw-semibold">
-          Attachement :
-        </label>
-        {data?.documents &&
-          data?.documents?.map((doc) => (
+      <div className="col-12 my-2 text-start">
+        <label className="form-label me-2 mb-0 fw-semibold">Attachment:</label>
+
+        {data?.documents?.map((doc) => {
+          const getIconByType = (type) => {
+            if (!type) return "bx bx-file";
+
+            if (type.includes("pdf")) return "bxs-file-pdf";
+            if (type.includes("word")) return "bxs-file-doc";
+            if (type.includes("excel") || type.includes("spreadsheet"))
+              return "bxs-file-xls";
+            if (type.includes("image")) return "bxs-file-image";
+            if (type.includes("zip") || type.includes("rar"))
+              return "bxs-file-archive";
+
+            return "bx bx-file"; // Default
+          };
+
+          const isImage = doc.contentType?.includes("image");
+
+          return (
             <div
               className="list-group-item list-group-item-action d-flex align-items-center"
               key={doc.id}
@@ -202,91 +220,75 @@ const nextStatusWithPermission = useMemo(() => {
               <div
                 className="rounded me-1 d-flex align-items-center justify-content-center cursor-pointer"
                 style={{ height: "50px", width: "80px", position: "relative" }}
+                onClick={() => {
+                  if (isImage) {
+                    setDocumentView({
+                      IsOpen: true,
+                      Image: doc.preSignedUrl,
+                    });
+                  }
+                }}
               >
-                {doc.contentType === "application/pdf" ? (
-                  <div>
-                    <i
-                      className="bx bxs-file-pdf"
-                      style={{ fontSize: "45px" }}
-                    ></i>
-                  </div>
-                ) : (
-                  <>
-                    {!imageLoaded[doc.id] && (
-                      <div className="position-absolute text-secondary">
-                        Loading...
-                      </div>
-                    )}
-                    <img
-                      src={doc.thumbPreSignedUrl}
-                      alt={doc.fileName}
-                      className="img-fluid rounded"
-                      style={{
-                        maxHeight: "100%",
-                        maxWidth: "100%",
-                        objectFit: "cover",
-                        opacity: imageLoaded[doc.id] ? 1 : 0,
-                        transition: "opacity 0.3s ease-in-out",
-                      }}
-                      onLoad={() => handleImageLoad(doc.id)}
-                      onClick={() =>
-                        setDocumentView({
-                          IsOpen: true,
-                          Image: doc.preSignedUrl,
-                        })
-                      }
-                    />
-                  </>
-                )}
+                <i
+                  className={`bx ${getIconByType(
+                    doc.contentType
+                  )} text-primary`}
+                  style={{ fontSize: "45px" }}
+                ></i>
               </div>
 
               <div className="w-100">
                 <small className="mb-0 small">{doc.fileName}</small>
                 <div className="d">
-                  <i className="bx bx-cloud-download cursor-pointer"></i>
+                  <a
+                    href={doc.preSignedUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="bx bx-cloud-download cursor-pointer"
+                  />
                 </div>
               </div>
             </div>
-          ))}
+          );
+        })}
       </div>
 
       <hr className="divider my-1" />
 
-    {Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
-  <div className="col-12 mb-3 text-start">
-    <label className="form-label me-2 mb-0 fw-semibold">Comment:</label>
+      {Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
+        <div className="col-12 mb-3 text-start">
+          <label className="form-label me-2 mb-0 fw-semibold">Comment:</label>
 
-    <textarea
-      className="form-control form-control-sm"
-      {...register("comment")}
-      rows="2"
-    />
-    {errors.comment && (
-      <small className="danger-text">{errors.comment.message}</small>
-    )}
+          <textarea
+            className="form-control form-control-sm"
+            {...register("comment")}
+            rows="2"
+          />
+          {errors.comment && (
+            <small className="danger-text">{errors.comment.message}</small>
+          )}
 
-    <input type="hidden" {...register("selectedStatus")} />
-
-    {nextStatusWithPermission?.length > 0 && (
-      <div className="text-center flex-wrap gap-2 my-2">
-        {nextStatusWithPermission?.map((status, index) => (
-          <button
-            key={status.id || index}
-            type="button"
-            onClick={() => {
-              setValue("selectedStatus", status.id);
-              handleSubmit(onSubmit)();
-            }}
-            className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
-          >
-            {status.displayName || status.name}
-          </button>
-        ))}
-      </div>
-    )}
-  </div>
-)}
+          <input type="hidden" {...register("selectedStatus")} />
 
+          {nextStatusWithPermission?.length > 0 && (
+            <div className="text-center flex-wrap gap-2 my-2">
+              {nextStatusWithPermission?.map((status, index) => (
+                <button
+                  key={status.id || index}
+                  type="button"
+                  onClick={() => {
+                    setValue("selectedStatus", status.id);
+                    handleSubmit(onSubmit)();
+                  }}
+                  className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
+                >
+                  {status.displayName || status.name}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
     </form>
   );
 };