diff --git a/src/assets/images/wrenchboard-logo-text_new.png b/src/assets/images/wrenchboard-logo-text_new.png
new file mode 100644
index 0000000..e741433
Binary files /dev/null and b/src/assets/images/wrenchboard-logo-text_new.png differ
diff --git a/src/components/MyActiveJobs/ActiveJobMessage.jsx b/src/components/MyActiveJobs/ActiveJobMessage.jsx
index 7c681f9..7d27384 100644
--- a/src/components/MyActiveJobs/ActiveJobMessage.jsx
+++ b/src/components/MyActiveJobs/ActiveJobMessage.jsx
@@ -20,7 +20,7 @@ export default function ActiveJobMessage({ activeJobMesList }) {
 
   return (
     <div className='flex flex-col justify-between'>
-    <div className="w-full h-full min-h-[400px] max-h-[400px] overflow-y-auto">
+    <div className="w-full h-full min-h-[250px] max-h-[300px] overflow-y-auto">
         <table className="wallet-activity w-full table-auto border-collapse text-left">
             <thead className='border-b-2'>
                 <tr className='text-slate-600'>
diff --git a/src/components/MyActiveJobs/ActiveJobs.jsx b/src/components/MyActiveJobs/ActiveJobs.jsx
index 3e2f511..1ef3f3e 100644
--- a/src/components/MyActiveJobs/ActiveJobs.jsx
+++ b/src/components/MyActiveJobs/ActiveJobs.jsx
@@ -13,6 +13,7 @@ import usersService from "../../services/UsersService";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import { SocketValues } from "../Contexts/SocketIOContext";
 import TabButton from "../customTabs/TabButton";
+import AttachFile from "../attachmentCom/AttachFile";
 
 function ActiveJobs(props) {
   let {sendMessage, joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
@@ -539,6 +540,12 @@ function ActiveJobs(props) {
 
         {/* MESSAGE SECTION */}
         <div className="w-full lg:w-1/2">
+          <div className="mb-4">
+            <AttachFile
+              data={props.details}
+              showOnData={true}
+            />
+          </div>
           <div className="flex justify-between items-center gap-5">
             <p className="w-full text-lg font-bold text-dark-gray dark:text-white tracking-wide flex items-center gap-2 justify-between"> 
               <span>Message</span>
diff --git a/src/components/attachmentCom/AttachFile.jsx b/src/components/attachmentCom/AttachFile.jsx
index 9e5a532..1e0a662 100644
--- a/src/components/attachmentCom/AttachFile.jsx
+++ b/src/components/attachmentCom/AttachFile.jsx
@@ -4,7 +4,7 @@ import axios from 'axios'
 
 import usersService from '../../services/UsersService'
 
-export default function AttachFile({data}) {
+export default function AttachFile({data='', showOnData=false}) {
 
     const apiCall = new usersService()
 
@@ -62,7 +62,7 @@ export default function AttachFile({data}) {
     }
 
     useEffect(()=>{
-        apiCall.jobManagerFiles({job_uid:data?.job_uid}).then(res => {
+        apiCall.jobManagerFiles({job_uid:data?.job_uid || data?.origin_job_uid}).then(res => {
             setUploadedList({loading: false, data:res.data})
         }).catch(err => {
             console.log(err)
@@ -71,55 +71,99 @@ export default function AttachFile({data}) {
     },[data, reloadList])
 
     return (
-        <div className='w-full h-full flex flex-col justify-center items-center rounded-md'>
-            <div className='w-full flex flex-col items-start gap-1 overflow-hidden'>
-                <div className='w-full flex justify-between items-center gap-1'>
-                    <div className='job-label job-label-flex'>
-                        Files {
-                        requestStatus.loading ? 
-                            <LoadingSpinner size='6' /> 
+        <>
+        {!showOnData ?
+            <div className='w-full h-full flex flex-col justify-center items-center rounded-md'>
+                <div className='w-full flex flex-col items-start gap-1 overflow-hidden'>
+                    <div className='w-full flex justify-between items-center gap-1'>
+                        <div className='job-label job-label-flex'>
+                            Files {
+                            requestStatus.loading ? 
+                                <LoadingSpinner size='6' /> 
+                                : 
+                                <span className={`text-[10px] ${requestStatus.status ? 'text-emerald-600' : 'text-red-500'}`}>{requestStatus.message}</span>
+                            } 
+                        </div>
+                        <label htmlFor='file' className={`cursor-pointer text-[12px] py-1 px-2 rounded-full border ${ requestStatus.loading && 'pointer-events-none'}`}>+ Add</label>
+                    </div>
+                    <div className='text-[12px] w-full px-2 py-1 h-20 overflow-y-auto flex flex-col gap-1 border'>
+                        {uploadedList.loading ?
+                        <div className='w-full h-full justify-center items-center'>
+                            <LoadingSpinner size='6' height='h-full' />
+                        </div>
+                        :
+                        Object.keys(uploadedList.data).length > 0 ?
+                        uploadedList.data.result_list.length > 0 ? 
+                            uploadedList.data.result_list.map((item, index) => {
+                                let fileNameExt = item.originalname.split('.')[item.originalname.split('.').length - 1]
+                                return(
+                                    <div key={item.file_uid} className='my-1 flex justify-start gap-2'>
+                                        <span>{index + 1}:</span>
+                                        <a 
+                                            target='_blank' 
+                                            alt='download-link' 
+                                            className='' 
+                                            href={`${uploadedList?.data?.session_image_server}/${localStorage.getItem("session_token")}/jobfile/${item.file_uid}`}
+                                        >
+                                            {(item.originalname).toString().length > 30 ? (item.originalname).toString().slice(0, 26) + '..._.' + fileNameExt : (item.originalname).toString()}
+                                        </a>
+                                    </div>
+                                )
+                            })
                             : 
-                            <span className={`text-[10px] ${requestStatus.status ? 'text-emerald-600' : 'text-red-500'}`}>{requestStatus.message}</span>
-                        } 
+                            <p className='text-sm'>No Uploaded files yet</p>
+                        :
+                        <></>
+                        }
                     </div>
-                    <label htmlFor='file' className={`cursor-pointer text-[12px] py-1 px-2 rounded-full border ${ requestStatus.loading && 'pointer-events-none'}`}>+ Add</label>
+                    <input 
+                        type="file" 
+                        id='file' 
+                        ref={inputFile} 
+                        className='hidden file:rounded-full job-label p-1' 
+                        onChange={upload}
+                    />
                 </div>
-                <div className='text-[12px] w-full px-2 py-1 h-20 overflow-y-auto flex flex-col gap-1 border'>
-                    {uploadedList.loading ?
-                    <div className='w-full h-full justify-center items-center'>
-                        <LoadingSpinner size='6' height='h-full' />
-                    </div>
-                    :
-                    Object.keys(uploadedList.data).length > 0 ?
-                    uploadedList.data.result_list.length > 0 ? 
-                        uploadedList.data.result_list.map((item, index) => (
-                            <div className='flex justify-start gap-2'>
-                                <span>{index + 1}:</span>
-                                <a 
-                                    target='_blank' 
-                                    alt='download-link'
-                                    key={item.file_uid} 
-                                    className='' 
-                                    href={`${uploadedList?.data?.session_image_server}/${localStorage.getItem("session_token")}/jobfile/${item.file_uid}`}
-                                >
-                                    {item.originalname}
-                                </a>
-                            </div>
-                        ))
-                        : 
-                        <p className='text-sm'>No Uploaded files yet</p>
-                    :
-                    <></>
-                    }
-                </div>
-                <input 
-                    type="file" 
-                    id='file' 
-                    ref={inputFile} 
-                    className='hidden file:rounded-full job-label p-1' 
-                    onChange={upload}
-                />
             </div>
-        </div>
+        :showOnData && uploadedList?.data?.result_list?.length > 0 ?
+            <div className='w-full h-full flex flex-col justify-center items-center rounded-md'>
+                <div className='w-full flex flex-col items-start gap-1 overflow-hidden'>
+                    <div className='w-full flex justify-between items-center gap-1'>
+                        <div className='job-label job-label-flex'>
+                            Files
+                        </div>
+                    </div>
+                    <div className='text-[12px] w-full px-2 py-1 h-20 overflow-y-auto flex flex-col gap-1 border'>
+                        {uploadedList.data.result_list.map((item, index) => {
+                            let fileNameExt = item.originalname.split('.')[item.originalname.split('.').length - 1]
+                            return(
+                                <div key={item.file_uid} className='flex justify-start gap-2'>
+                                    <span>{index + 1}:</span>
+                                    <a 
+                                        target='_blank' 
+                                        alt='download-link'
+                                        className='' 
+                                        href={`${uploadedList?.data?.session_image_server}/${localStorage.getItem("session_token")}/jobfile/${item.file_uid}`}
+                                    >
+                                        {(item.originalname).toString().length > 30 ? (item.originalname).toString().slice(0, 26) + '..._.' + fileNameExt : (item.originalname).toString()}
+                                    </a>
+                                </div>
+                            )
+                        })
+                        }
+                    </div>
+                    <input 
+                        type="file" 
+                        id='file' 
+                        ref={inputFile} 
+                        className='hidden file:rounded-full job-label p-1' 
+                        onChange={upload}
+                    />
+                </div>
+            </div>
+        :
+            <></>
+        }
+        </>
     )
 }
diff --git a/src/components/jobPopout/FamilyOfferJobPopout.jsx b/src/components/jobPopout/FamilyOfferJobPopout.jsx
index 4947971..9245485 100644
--- a/src/components/jobPopout/FamilyOfferJobPopout.jsx
+++ b/src/components/jobPopout/FamilyOfferJobPopout.jsx
@@ -11,6 +11,7 @@ import { tableReload } from "../../store/TableReloads";
 import { useDispatch } from "react-redux";
 
 import { SocketValues } from "../Contexts/SocketIOContext";
+import AttachFile from "../attachmentCom/AttachFile";
 
 const VideoElement = lazy(() => import("../VideoCom/VideoElement"));
 const ImageElement = lazy(() => import("../ImageCon/ImageElement"));
@@ -206,11 +207,11 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
           </div>
 
           {/* ACTION SECTION */}
-          <div className="p-4 w-full md:w-2/5 h-full flex flex-col justify-between">
+          <div className="p-4 w-full md:w-2/5 h-full flex flex-col gap-4 justify-between">
             { details.job_type == 'TASK' ?
               <div className="image-wrapper w-full h-40 flex justify-center items-center">
                 <Suspense fallback={<p className="w-full text-center">Loading...</p>}>
-                  <ImageElement src={details?.image} alt='banner' className='w-auto h-full' />
+                  <ImageElement src={details?.image} alt='banner' className='w-full h-auto' />
                 </Suspense>
               </div>
               :
@@ -222,6 +223,9 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
                 </div>
               </div>
             }
+            <div className="w-full">
+              <AttachFile data={details} showOnData={true} />
+            </div>
             <div className="my-3 md:flex md:justify-center">
               {requestStatus.loading && requestStatus.trigger == "offer" ? (
                 <LoadingSpinner size={8} color="sky-blue" />
diff --git a/src/components/jobPopout/popoutcomponent/Detail.jsx b/src/components/jobPopout/popoutcomponent/Detail.jsx
index 21a1b92..ee95a11 100644
--- a/src/components/jobPopout/popoutcomponent/Detail.jsx
+++ b/src/components/jobPopout/popoutcomponent/Detail.jsx
@@ -3,7 +3,7 @@ import React from 'react'
 function Detail({label, value, bg,}) {
   return (
     <>
-        <label className='job-label w-full md:w-1/4'>{label}</label>
+        <label className='job-label w-full md:w-[150px]'>{label}</label>
         <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white ${bg ? bg : null}`}>{value}</p>
     </>
   )