diff --git a/src/components/ServiceProject/JobComments.jsx b/src/components/ServiceProject/JobComments.jsx
index 894c1b38..ff86577c 100644
--- a/src/components/ServiceProject/JobComments.jsx
+++ b/src/components/ServiceProject/JobComments.jsx
@@ -22,7 +22,7 @@ const JobComments = ({ data }) => {
     formState: { errors },
   } = useAppForm({
     resolver: zodResolver(JobCommentSchema),
-     defaultValues:{ comment: "", attachments: [] }
+    defaultValues: { comment: "", attachments: [] }
   });
 
   const {
@@ -119,38 +119,49 @@ const JobComments = ({ data }) => {
             </div>
           </div>
 
-          <div className="d-flex justify-content-end gap-3 align-items-center text-end mt-3">
-            <div
-              onClick={() => document.getElementById("attachments").click()}
-              className="cursor-pointer"
-            >
-              <input
-                type="file"
-                accept=".pdf,.jpg,.jpeg,.png"
-                id="attachments"
-                multiple
-                className="d-none"
-                {...register("attachments")}
-                onChange={(e) => {
-                  onFileChange(e);
-                  e.target.value = "";
-                }}
-              />
-              <i className="bx bx-paperclip"></i>
-              Add Attachment
+          <div className="d-flex flex-column flex-md-row justify-content-between align-items-start">
+            {/* LEFT SIDE → Uploaded Files */}
+            <div className="flex-grow-1 ms-10 mt-2">
+              {files?.length > 0 && (
+                <Filelist files={files} removeFile={removeFile} />
+              )}
+            </div>
+
+            {/* RIGHT SIDE → Add Attachment + Submit */}
+            <div className="d-flex gap-3 align-items-center text-end mt-3 ms-10 ms-md-0">
+              <div
+                onClick={() => document.getElementById("attachments").click()}
+                className="cursor-pointer"
+                style={{ whiteSpace: 'nowrap' }}
+              >
+                <input
+                  type="file"
+                  accept=".pdf,.jpg,.jpeg,.png"
+                  id="attachments"
+                  multiple
+                  className="d-none"
+                  {...register("attachments")}
+                  onChange={(e) => {
+                    onFileChange(e);
+                    e.target.value = "";
+                  }}
+                />
+                <i className="bx bx-sm bx-paperclip mb-1 me-1"></i>
+                Add Attachment
+              </div>
+
+              <button
+                className="btn btn-primary btn-sm px-1 py-1" // smaller padding + slightly smaller font
+                type="submit"
+                disabled={!watch("comment")?.trim() || isPending}
+              >
+                <i className="bx bx-xs bx-send me-1"></i>
+                Submit
+              </button>
+
             </div>
-            <button
-              className="btn btn-primary btn-sm px-3"
-              type="submit"
-              disabled={!watch("comment")?.trim() || isPending}
-            >
-              <i className="bx bx-send me-1"></i>
-              Submit
-            </button>
           </div>
-          {files?.length > 0 && (
-            <Filelist files={files} removeFile={removeFile} />
-          )}
+
         </form>
       </div>
       <div className="card-body p-0">
diff --git a/src/components/ServiceProject/ManageJobTicket.jsx b/src/components/ServiceProject/ManageJobTicket.jsx
index 7339c9a8..5f29b125 100644
--- a/src/components/ServiceProject/ManageJobTicket.jsx
+++ b/src/components/ServiceProject/ManageJobTicket.jsx
@@ -7,6 +7,7 @@ import Avatar from "../common/Avatar";
 import EmployeeAvatarGroup from "../common/EmployeeAvatarGroup";
 import JobStatusLog from "./JobStatusLog";
 import JobComments from "./JobComments";
+import { daysLeft } from "../../utils/appUtils";
 
 const ManageJobTicket = ({ Job }) => {
   const { data, isLoading, isError, error } = useServiceProjectJobDetails(
@@ -17,14 +18,14 @@ const ManageJobTicket = ({ Job }) => {
     {
       id: "comment",
       title: "Comments",
-      icon:"bx bx-comment me-2",
+      icon: "bx bx-comment me-2",
       active: true,
       content: <JobComments data={data} />,
     },
     {
       id: "history",
       title: "History",
-       icon:"bx bx-time me-2",
+      icon: "bx bx-time me-2",
       active: false,
       content: <JobStatusLog data={data?.updateLogs} />,
     },
@@ -41,56 +42,79 @@ const ManageJobTicket = ({ Job }) => {
   return (
     <div className="row text-start">
       <div className="col-12">
-        <h6 className="fs-5 fw-semibold">{data?.title}</h6>
-        <div className="d-flex justify-content-between">
-          <div className="d-flex flex-row gap-2">
-            <i className="bx bx-calendar"></i>{" "}
-            <span>{formatUTCToLocalTime(data?.createdAt, true)}</span>
-          </div>
+        <div className="d-flex justify-content-between align-items-center mb-3">
           <span className="badge bg-label-primary">{data?.status?.name}</span>
+          {data?.dueDate && (() => {
+            const { days, color } = daysLeft(data?.startDate, data?.dueDate);
+            return (
+              <span style={{ fontSize: "12px" }}>
+                <span className="fw-medium me-1">Days Left :</span>
+                <span className={`badge bg-${color}`}>
+                  {days !== null ? `${days} days` : "N/A"}
+                </span>
+              </span>
+            );
+          })()}
+
         </div>
-        <div className="d-flex flex-wrap my-3">
-          <p>{data?.description}</p>
+        <h6 className="fs-5 fw-semibold">{data?.title}</h6>
+
+        <div className="d-flex flex-wrap">
+          <p>
+            <span className="fw-medium me-1">Description :</span>
+            {data?.description || "N/A"}
+          </p>
         </div>
-        <div className="d-flex flex-row gap-5">
-          <span className="fw-medium">
-          <i className="bx bx-calendar"></i>  Start Date : {formatUTCToLocalTime(data?.startDate)}
-          </span>{" "}
-          <i className="bx bx-right-arrow-alt"></i>{" "}
-          <span className="fw-medium">
-          <i className="bx bx-calendar"></i>  Due on : {formatUTCToLocalTime(data?.startDate)}
-          </span>
+
+
+        <div className="d-flex justify-content-between mb-4">
+          <div className="d-flex flex-row gap-1 fw-medium">
+            <i className="bx bx-calendar"></i>{" "}
+            <span>Created Date : {formatUTCToLocalTime(data?.createdAt, true)}</span>
+          </div>
         </div>
-        <div className="d-block mt-2">
+
+        <div>
+          <div className="d-flex flex-row gap-5">
+            <span className="fw-medium">
+              <i className="bx bx-calendar"></i>  Start Date : {formatUTCToLocalTime(data?.startDate)}
+            </span>{" "}
+            <i className="bx bx-right-arrow-alt"></i>{" "}
+            <span className="fw-medium">
+              <i className="bx bx-calendar"></i>  Due on : {formatUTCToLocalTime(data?.startDate)}
+            </span>
+          </div>
+        </div>
+        <div className="d-block mt-4 mb-3">
           <div className="d-flex align-items-center mb-2">
-            <small className="fs-6 text-secondary fs-italic me-3 mt-2">
-              <em>Created By</em>
-            </small>{" "}
+            <span className="fs-6 fw-medium me-5">
+              Created By
+            </span>{" "}
             <Avatar
               size="xs"
               firstName={data?.createdBy?.firstName}
               lastName={data?.createdBy?.lastName}
             />{" "}
-             <div className="d-flex flex-row align-items-center">
-                    <p className="m-0">{`${data?.createdBy?.firstName} ${data?.createdBy?.lastName}`}</p>
-                    <small className="text-secondary ms-1">({data?.createdBy?.jobRoleName})</small>
-                  </div>
+            <div className="d-flex flex-row align-items-center">
+              <p className="m-0">{`${data?.createdBy?.firstName} ${data?.createdBy?.lastName}`}</p>
+              <small className="text-secondary ms-1">({data?.createdBy?.jobRoleName})</small>
+            </div>
           </div>
           <div className="d-flex align-items-center">
-            <small className="fs-6 text-secondary fs-italic me-3 mt-2">
-              <em>Assigned</em>
+            <small className="fs-6 fw-medium me-3">
+              Assigned By
             </small>
-             <div className="d-flex flex-row gap-3">
-              {data?.assignees?.map((emp)=>(
+            <div className="d-flex flex-row gap-3">
+              {data?.assignees?.map((emp) => (
                 <div className="d-flex flex-row ">
-                  <Avatar size="xs" firstName={emp.firstName} lastName={emp.lastName}/>
+                  <Avatar size="xs" firstName={emp.firstName} lastName={emp.lastName} />
                   <div className="d-flex flex-row align-items-center">
                     <p className="m-0">{`${emp.firstName} ${emp.lastName}`}</p>
-                    <small className="text-secondary ms-1">( {emp.jobRoleName} )</small>
-                  </div>
+                    <small className="text-secondary ms-1">({emp.jobRoleName})</small>
                   </div>
+                </div>
               ))}
-             </div>
+            </div>
           </div>
         </div>
       </div>
@@ -106,7 +130,7 @@ const ManageJobTicket = ({ Job }) => {
                 data-bs-target={`#tab-${tab.id}`}
                 role="tab"
               >
-               <i className={tab.icon} /> {tab.title}
+                <i className={tab.icon} /> {tab.title}
               </button>
             </li>
           ))}
diff --git a/src/components/common/OffcanvasComponent.jsx b/src/components/common/OffcanvasComponent.jsx
index 970785ae..f9e2d1c1 100644
--- a/src/components/common/OffcanvasComponent.jsx
+++ b/src/components/common/OffcanvasComponent.jsx
@@ -6,7 +6,7 @@ const OffcanvasComponent = ({
   placement = "start", // start | end | top | bottom
   children,
   show = false,
-  onClose = () => {},
+  onClose = () => { },
 }) => {
   const offcanvasRef = useRef(null);
   const bsInstance = useRef(null);
@@ -45,11 +45,19 @@ const OffcanvasComponent = ({
         aria-labelledby={`${id}-label`}
       >
         <div className="offcanvas-header">
-           <div className='d-flex flex-row gap-3'>
-           <i className='bx bx-lg bx-left-arrow-alt cursor-pointer' data-bs-dismiss="offcanvas"
-            aria-label="Close"></i> <i className='bx bx-briefcase text-primary'></i> <h5 className="offcanvas-title" id={`${id}-label`}>{title}</h5>
-      </div>
-        
+          <div className="d-flex align-items-center gap-3">
+            <i
+              className="bx bx-lg bx-left-arrow-alt cursor-pointer"
+              data-bs-dismiss="offcanvas"
+              aria-label="Close"
+            ></i>
+            <i className="bx bx-briefcase text-primary"></i>
+            <h5 className="offcanvas-title mb-0" id={`${id}-label`}>
+              {title}
+            </h5>
+          </div>
+
+
           <button
             type="button"
             className="btn-close"