diff --git a/src/components/MyActiveJobs/ActiveJobs.jsx b/src/components/MyActiveJobs/ActiveJobs.jsx
index e9d88f8..268fedd 100644
--- a/src/components/MyActiveJobs/ActiveJobs.jsx
+++ b/src/components/MyActiveJobs/ActiveJobs.jsx
@@ -15,6 +15,10 @@ function ActiveJobs(props) {
 
   let [messageToSend, setMessageToSend] = useState('') // State to hold the value of message to be sent
 
+  let [filesToSend, setFilesToSend] = useState([]) // State to hold the value of files to be sent
+
+  let [tab, setTab] = useState('message')
+
   let [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: ''})
 
   // FUNCTION TO HANDLE MESSAGE CHANGE
@@ -22,6 +26,28 @@ function ActiveJobs(props) {
     setMessageToSend(value)
   }
 
+  // FUNCTION TO HANDLE FILE UplOAD CHANGE
+  const handleFileChange = ({target:{files}}) => {
+    setFilesToSend(prev => ([...prev, files[0]]))
+  }
+
+  // FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES
+  const handleClearAll = ({target:{name}}) => {
+      if(tab == 'message'){
+        setMessageToSend('')
+      }else if(tab=='files'){
+        setFilesToSend([])
+      }else{
+        return
+      }
+  }
+
+  // FUNCTION TO REMOVE AND IMAGE
+  const handleRemoveImage = (imageToDelete) => {
+      setFilesToSend(prev => prev.filter(item => item.name != imageToDelete.name))
+      console.log(id)
+  }
+
   // FUNCTION TO SEND TASK MESSAGE
   const sendTaskMessage = () => {
     let reqData={message: messageToSend, msg_type: 'TEXT', contract:props.details.contract}
@@ -52,7 +78,7 @@ function ActiveJobs(props) {
   return (
     <Layout>
 
-        <div className="py-[20px] bg-white px-4 rounded-md shadow-md lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
+        <div className="py-[20px] bg-white px-4 rounded-2xl shadow-md lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
             {/* job title */}
             <div className="w-full lg:w-1/2">
               <div className="w-full flex justify-start space-x-3 items-start">
@@ -115,7 +141,7 @@ function ActiveJobs(props) {
             {/* end of job details */}
         </div>
 
-        <div className="my-4 py-[20px] bg-white px-4 rounded-md shadow-md lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
+        <div className="my-4 py-[20px] bg-white px-4 rounded-2xl shadow-md lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
             <div className="w-full lg:w-1/2">
               <div className="">
                 <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Actions</h1>
@@ -125,17 +151,52 @@ function ActiveJobs(props) {
               </div>
 
               {/* TEXTAREA SECTION */}
-              <div className="mt-3">
+              <div className="mt-5">
                 <div className="">
-                  <p className="relative py-2 my-2 text-lg font-bold text-slate-600 dark:text-black border-b-2 border-slate-300 tracking-wide after:absolute after:-bottom-0.5 after:content-[''] after:w-[100px] after:h-[2px] after:bg-sky-blue after:left-0">Message(s)</p>
-                  <textarea
-                    className="p-4 w-full text-base text-slate-600 border border-slate-300 outline-none"
-                    rows="10"
-                    style={{ resize: "none" }}
-                    name='message'
-                    onChange={handleMessageChange}
-                    value={messageToSend}
-                  />
+                  {/* <p className="relative py-2 my-2 text-lg font-bold text-slate-600 dark:text-black border-b-2 border-slate-300 tracking-wide after:absolute after:-bottom-0.5 after:content-[''] after:w-[100px] after:h-[2px] after:bg-sky-blue after:left-0">Message(s)</p> */}
+                  <div className="my-2 flex items-center border-b border-slate-300">
+                    <button 
+                      name='message'
+                      onClick={(e) => setTab(e.target.name)}
+                      className={`p-2 text-lg font-bold text-slate-600 dark:text-black border ${tab == 'message'? 'border-sky-blue':'border-slate-300'} tracking-wide transition duration-200`}>
+                        Send Message
+                    </button>
+                    <button 
+                      name='files'
+                      onClick={(e) => setTab(e.target.name)}
+                      className={`p-2 text-lg font-bold text-slate-600 dark:text-black border ${tab == 'files'? 'border-sky-blue':'border-slate-300'}  tracking-wide transition duration-200`}>
+                        Send Files
+                    </button>
+                  </div>
+                  {tab == 'message' ?
+                    (
+                      <textarea
+                        className="p-4 w-full text-base text-slate-600 border border-slate-300 outline-none"
+                        rows="10"
+                        style={{ resize: "none" }}
+                        name='message'
+                        onChange={handleMessageChange}
+                        value={messageToSend}
+                      />
+                    )
+                    :
+                    <div className="p-4 w-full text-base text-slate-600 border border-slate-300">
+                      <div className="files">
+                        <label htmlFor="file" className="h-20 btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer">Select Files to Upload</label>
+                        <input type="file" id='file' style={{display: 'none'}} onChange={handleFileChange}/>
+                      </div>
+                      <div className="selected_file my-2">
+                        {filesToSend.length > 0 &&
+                          filesToSend.map((item, index)=> (
+                            <p key={index} className="flex items-center space-x-2">
+                              <span>{item.name}</span>
+                              <button name='remove' onClick={()=>handleRemoveImage(item)} className="px-2 flex justify-center items-center rounded-full border border-red-500 text-red-500">x</button>
+                            </p>
+                          ))
+                        }
+                      </div>
+                    </div>
+                  }
                 </div>
 
                 {/* ERROR DISPLAY AND SUBMIT BUTTON */}
@@ -161,39 +222,63 @@ function ActiveJobs(props) {
                   {/* End of error or success display */}
 
                 {/* Buttons Sections */}
-                <div className="py-2 sm:flex sm:justify-center sm:items-center">
-                  <div className="w-full mb-3 sm:mb-0 sm:w-2/4">
-                    <button
-                      onClick={()=>{console.log('working')}}
-                      type="button"
-                      className="btn-gradient text-base tracking-wide px-4 py-2 rounded-md flex justify-center items-center"
-                    >
-                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill='white'>
-                        <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z"/>
-                      </svg>
+                <div className="py-2 sm:flex sm:justify-end sm:items-center">
+                  {/* <div className="w-full mb-3 sm:mb-0 sm:w-2/4">
+                    {tab == 'files' && 
+                      (
+                        <button
+                          onClick={()=>{console.log('working')}}
+                          type="button"
+                          className="btn-gradient text-base tracking-wide px-4 py-2 rounded-md flex justify-center items-center"
+                        >
+                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill='white'>
+                            <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z"/>
+                          </svg>
 
-                      <span className="text-white">Upload Files</span>
-                    </button>
-                  </div>
+                          <span className="text-white">Upload Files</span>
+                        </button>
+                      )
+                    }
+                  </div> */}
 
                   <div className="w-full sm:w-2/4 flex justify-between items-center space-x-2">
                     <button
                         type="button"
-                        className="bg-red-600 text-base text-white tracking-wide px-4 py-2 rounded-md hover:opacity-90"
+                        onClick={handleClearAll}
+                        className="border-gradient text-base tracking-wide px-4 py-3 rounded-full"
                     >
-                        <span className="text-white">Clear</span>
-                    </button>
-                    <button
-                      onClick={sendTaskMessage}
-                        type="button"
-                        className="btn-gradient text-base text-white tracking-wide px-4 py-2 rounded-md"
-                    >
-                        {requestStatus.loading ? 
-                        <LoadingSpinner size='6' color='sky-blue' />
-                        :
-                        <span className="text-white">Send</span>
-                        }
+                        <span className="text-gradient">Clear</span>
                     </button>
+                    {tab == 'files' ? 
+                      (
+                        <button
+                          onClick={()=>{console.log('working')}}
+                          type="button"
+                          className="btn-gradient text-base tracking-wide px-4 py-3 rounded-full flex justify-center items-center"
+                        >
+                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill='white'>
+                            <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z"/>
+                          </svg>
+
+                          <span className="text-white">Upload Files</span>
+                        </button>
+                      )
+                      :
+                      (
+                        <button
+                          onClick={sendTaskMessage}
+                            type="button"
+                            className="btn-gradient text-base text-white tracking-wide px-4 py-3 rounded-full"
+                        >
+                            {requestStatus.loading ? 
+                            <LoadingSpinner size='6' color='sky-blue' />
+                            :
+                            <span className="text-white">Send</span>
+                            }
+                        </button>
+                      )
+                    }
+                    
                   </div>
 
                 </div>