diff --git a/.env b/.env
index fcdc42c..639fb0b 100644
--- a/.env
+++ b/.env
@@ -124,4 +124,7 @@ REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
 REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
 
 # REACT APP CUSTOMTIMER
-REACT_APP_CUSTOMTIMER=90
\ No newline at end of file
+REACT_APP_CUSTOMTIMER=90
+
+# MEDIA_SERVER_URL
+MEDIA_SERVER_URL=''
\ No newline at end of file
diff --git a/.env.development b/.env.development
index 5f2d549..b52c693 100644
--- a/.env.development
+++ b/.env.development
@@ -92,4 +92,7 @@ REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
 REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
 
 # REACT APP CUSTOMTIMER
-REACT_APP_CUSTOMTIMER=90
\ No newline at end of file
+REACT_APP_CUSTOMTIMER=90
+
+# MEDIA_SERVER_URL
+MEDIA_SERVER_URL=''
\ No newline at end of file
diff --git a/.env.production b/.env.production
index cfa2c24..9b16333 100644
--- a/.env.production
+++ b/.env.production
@@ -98,4 +98,7 @@ REACT_APP_MEDIA_LINK='https://media.wrenchboard.com'
 REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
 
 # REACT APP CUSTOMTIMER
-REACT_APP_CUSTOMTIMER=90
\ No newline at end of file
+REACT_APP_CUSTOMTIMER=90
+
+# MEDIA_SERVER_URL
+MEDIA_SERVER_URL=''
\ No newline at end of file
diff --git a/src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx b/src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx
index 0de3e7c..19de55e 100644
--- a/src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx
+++ b/src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx
@@ -152,7 +152,7 @@ export default function AssignPrevNewTask({
                                 </div>
                               </div>
                               <div className="w-full flex items-center justify-center">
-                                <div className="w-28 h-28 rounded-2xl flex items-center justify-center">
+                                <div className="mb-1 w-28 h-28 rounded-2xl flex items-center justify-center">
                                     <img 
                                       className="w-full h-auto"
                                       loading="lazy"
diff --git a/src/components/attachmentCom/AttachFile.jsx b/src/components/attachmentCom/AttachFile.jsx
index ed294f3..948d8e5 100644
--- a/src/components/attachmentCom/AttachFile.jsx
+++ b/src/components/attachmentCom/AttachFile.jsx
@@ -1,25 +1,23 @@
 import React, { useRef, useState } from 'react'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+import axios from 'axios'
 
 export default function AttachFile({data}) {
 
-    const [file, setFile] = useState('')
-
     const [requestStatus, setRequestStatus] = useState({loading: false, status:false, message:''})
 
     const inputFile = useRef()
-    console.log('data', data.job_uid)
 
-    let inputs = {
-        file: file,
-        job_uid: data?.job_uid,
-        uid: localStorage.getItem("uid"),
-        member_id: localStorage.getItem("member_id"),
-        sessionid: localStorage.getItem("session_token"),
-      };
-
-    const upload = () => {
+    const upload = (event) => {
+        let inputs = {
+            file: event.target.files[0],
+            job_uid: data?.job_uid,
+            uid: localStorage.getItem("uid"),
+            member_id: localStorage.getItem("member_id"),
+            sessionid: localStorage.getItem("session_token"),
+          };
         setRequestStatus({loading: true, status:false, message:''})
-        if(!file){
+        if(!inputs.file){
             setRequestStatus({loading: false, status:false, message:'Please select a file'})
             setTimeout(()=>{
                 setRequestStatus({loading: false, status:false, message:''})
@@ -32,19 +30,58 @@ export default function AttachFile({data}) {
         }
 
         console.log('data', formData, inputs)
-        inputFile.current.value = []
-        inputFile.current.value = null
-        setFile('')
+        // axios.post(`${process.env.MEDIA_SERVER_URL}/upload/task`,formData).then(res => {
+        //     if(res.data.status < 1){
+        //         inputFile.current.value = null
+        //         setRequestStatus({loading: false, status:false, message:'upload failed'})
+        //         setTimeout(()=>{
+        //             setRequestStatus({loading: false, status:false, message:''})
+        //         }, 3000)
+        //         return 
+        //     }
+        //     setRequestStatus({loading: false, status:true, message:'uploaded'})
+        //     inputFile.current.value = null
+        //     setTimeout(()=>{
+        //         setRequestStatus({loading: false, status:false, message:''})
+        //     }, 3000)
+        // }).catch(err => {
+        //     inputFile.current.value = null
+        //     setRequestStatus({loading: false, status:false, message:'upload failed'})
+        //     setTimeout(()=>{
+        //         setRequestStatus({loading: false, status:false, message:''})
+        //     }, 3000)
+        //     return 
+        // })
+        
+        setTimeout(()=>{
+            setRequestStatus({loading: false, status:false, message:''})
+        }, 3000)
     }
 
     return (
-        <div className='p-4 w-full h-full flex flex-col justify-center items-center bg-yellow-500 rounded-md'>
+        <div className='w-full h-full flex flex-col justify-center items-center rounded-md border'>
             <div className='w-full flex flex-col items-start gap-1 overflow-hidden'>
-                <input type="file" ref={inputFile} className='file:rounded-full job-label p-1' onChange={(e) => setFile(e.target.files[0])}/>
-                <div className='w-full flex gap-2 items-center'>
-                    <button type="button" className='custom-btn btn-gradient text-white font-medium' onClick={upload}>Upload</button>
-                    {requestStatus.message && <p className={`text-[10px] ${requestStatus.status ? 'text-emerald-600' : 'text-red-500'}`}>{requestStatus.message}</p>}
+                <div className='p-2 w-full flex justify-between items-center gap-1 border-b shadow-sm'>
+                    <p className='job-label job-label-flex'>
+                        Files {
+                        requestStatus.loading ? 
+                            <LoadingSpinner size='6' /> 
+                            : 
+                            <p className={`text-[10px] ${requestStatus.status ? 'text-emerald-600' : 'text-red-500'}`}>{requestStatus.message}</p>
+                        } 
+                    </p>
+                    <label htmlFor='file' className={`cursor-pointer job-label py-1 px-2 rounded-full border ${ requestStatus.loading && 'pointer-events-none'}`}>+ Add</label>
                 </div>
+                <div className='job-label w-full px-2 py-1 h-20 overflow-y-auto flex justify-center items-center'>
+                    list shows here
+                </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/EditJobPopoutNew.jsx b/src/components/jobPopout/EditJobPopoutNew.jsx
index b87ed40..f3ea880 100644
--- a/src/components/jobPopout/EditJobPopoutNew.jsx
+++ b/src/components/jobPopout/EditJobPopoutNew.jsx
@@ -302,7 +302,7 @@ const EditJobPopoutNew = ({
                                 <Field
                                     component="select"
                                     name="timeline_days"
-                                    className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray dark:text-white w-full h-[42px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
+                                    className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none ${
                                     props.errors.timeline_days &&
                                     props.touched.timeline_days
                                         ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
@@ -424,10 +424,15 @@ const EditJobPopoutNew = ({
                                 {/* FOR TASK IMAGE */}
                                 <div className="w-1/3 relative flex flex-col max-h-[130px] min-h-[130px]">
                                 <label
-                                    className="w-full job-label"
-                                    htmlFor="timeline_days"
+                                    className={`w-full job-label job-label-flex cursor-pointer ${uploadStatus.loading && 'pointer-events-none'}`}
+                                    htmlFor="task_image"
                                     >
                                     Banner
+                                    {uploadStatus.loading ? 
+                                        <LoadingSpinner size='6' /> 
+                                        : 
+                                        <p className={`text-[10px] ${uploadStatus.status ? 'text-emerald-600' : 'text-red-500'}`}>{uploadStatus.message}</p>
+                                    } 
                                 </label>
                                 <input
                                     id="task_image"
@@ -493,25 +498,6 @@ const EditJobPopoutNew = ({
                                 )
                             ))}
                             {/* End of error or success display */}
-
-                            {/* DISPLAYS TASK IMAGE UPLOADING STATUS */}
-                            <div className="w-full">
-                            {uploadStatus.message && !uploadStatus.loading && (
-                                <p
-                                className={`text-center ${
-                                    uploadStatus.status
-                                    ? "text-green-500"
-                                    : "text-red-500"
-                                }`}
-                                >
-                                {uploadStatus.message}
-                                </p>
-                            )}
-                            {uploadStatus.loading && (
-                                <p className="text-center">{uploadStatus.message}</p>
-                            )}
-                            </div>
-
                         </div>
                     </div>
                     <div className="modal-footer-wrapper justify-end">