diff --git a/.env b/.env
index 6931de2..330d22f 100644
--- a/.env
+++ b/.env
@@ -45,6 +45,9 @@ REACT_APP_FACEBOOK_CLIENT_ID=390204307987009
 REACT_APP_FACEBOOK_CLIENT_SECRET=19f778e312f2ab96d147bacb612910c2
 REACT_APP_FACEBOOK_CLIENT_SCOPE="email, public_profile"
 
+REACT_APP_MAX_FILE_SIZE=1000000
+REACT_APP_TOTAL_NUM_FILE=4
+
 
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227
diff --git a/.env.development b/.env.development
index 7783b2d..288f294 100644
--- a/.env.development
+++ b/.env.development
@@ -37,4 +37,7 @@ REACT_APP_ITEM_PER_PAGE=5
 REACT_APP_GOOGLE_CLIENT_ID=817021856543-ad9nsjgdpsu2s2jrl63j3ihrv7lbf6ma.apps.googleusercontent.com
 REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
 REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
-REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
\ No newline at end of file
+REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
+
+REACT_APP_MAX_FILE_SIZE=1000000
+REACT_APP_TOTAL_NUM_FILE=4
\ No newline at end of file
diff --git a/.env.production b/.env.production
index 94fbf21..d5d045f 100644
--- a/.env.production
+++ b/.env.production
@@ -37,4 +37,10 @@ REACT_APP_ITEM_PER_PAGE=5
 REACT_APP_GOOGLE_CLIENT_ID=817021856543-ad9nsjgdpsu2s2jrl63j3ihrv7lbf6ma.apps.googleusercontent.com
 REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
 REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
-REACT_APP_GOOGLE_REDIRECT_URL=https://users.wrenchboard.com/login/auth/
\ No newline at end of file
+REACT_APP_GOOGLE_REDIRECT_URL=https://users.wrenchboard.com/login/auth/
+
+DISABLE_ESLINT_PLUGIN=true
+
+REACT_APP_MAX_FILE_SIZE=1000000
+REACT_APP_TOTAL_NUM_FILE=4
+
diff --git a/src/components/MyActiveJobs/ActiveJobMessage.jsx b/src/components/MyActiveJobs/ActiveJobMessage.jsx
index 9aedbfb..c73ec45 100644
--- a/src/components/MyActiveJobs/ActiveJobMessage.jsx
+++ b/src/components/MyActiveJobs/ActiveJobMessage.jsx
@@ -48,7 +48,7 @@ export default function ActiveJobMessage({ activeJobMesList }) {
         :
         <tbody>
             <tr className='text-slate-500'>
-                <td className="p-2" colSpan={4}>No Purchase History Found!</td>
+                <td className="p-2" colSpan={4}>No Message Found!</td>
             </tr>
         </tbody>
         }
diff --git a/src/components/MyActiveJobs/ActiveJobs.jsx b/src/components/MyActiveJobs/ActiveJobs.jsx
index 5c7d710..e0a493f 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,43 @@ function ActiveJobs(props) {
     setMessageToSend(value)
   }
 
+  // FUNCTION TO HANDLE FILE UPlOAD CHANGE
+  const handleFileChange = ({target:{files}}) => {
+    setRequestStatus({loading: false, status: false, message: ''}) // State to determine error state
+    if(files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)){
+      setRequestStatus({loading: false, status: false, message: 'File must be <= 1mb'})
+      setTimeout(()=>{
+        setRequestStatus({loading: false, status: false, message: ''})
+      }, 5000)
+      return
+    }
+    if(filesToSend.length >= Number(process.env.REACT_APP_TOTAL_NUM_FILE)){
+      setRequestStatus({loading: false, status: false, message: `Total number of attachment is ${Number(process.env.REACT_APP_TOTAL_NUM_FILE)}`})
+      setTimeout(()=>{
+        setRequestStatus({loading: false, status: false, message: ''})
+      }, 5000)
+      return
+    }
+    // INCLUDE FILE IF NO ERROR
+    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))
+  }
+
   // FUNCTION TO SEND TASK MESSAGE
   const sendTaskMessage = () => {
     let reqData={message: messageToSend, msg_type: 'TEXT', contract:props.details.contract}
@@ -52,11 +93,10 @@ function ActiveJobs(props) {
   return (
     <Layout>
 
-        <div className="p-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0 rounded-lg shadow-lg bg-slate-100">
-          <div className="w-full lg:w-1/2">
-            <div className="py-[20px] bg-white px-4 rounded-md shadow-md">
-              {/* back btn and title */}
-              <div className="w-full flex justify-start space-x-3 items-center">
+        <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">
                 <button
                   type="button"
                   className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
@@ -72,143 +112,206 @@ function ActiveJobs(props) {
                     <path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
                   </svg>
                 </button>
-                <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
+                <h1 className="text-xl lg:text-2xl font-bold text-dark-gray dark:text-white tracking-wide">
                   {props.details?.title && props.details.title}
                 </h1>
               </div>
-              {/* END of back btn and title */}
 
-              <div className="mt-2 w-full flex flex-col-reverse lg:flex-row lg:justify-between lg:items-start lg:space-x-2">
-                <div className="w-full lg:w-2/3 my-2 lg:my-0">
-                  <p className="text-base text-slate-700 dark:text-black">
+              <div className="w-full my-4">
+                <div className="pb-2 w-full flex items-center">
+                  <p className="w-full lg:w-2/3 text-base text-slate-700 dark:text-black">
                     {props.details?.contract && props.details.contract}
                   </p>
-                  <p className="text-base text-slate-700 dark:text-black">
-                    <span className="font-semibold">Description: </span>
-                    {props.details?.description && props.details.description}
-                  </p>
-                  <p className="text-base text-sky-blue">Delivery Detail</p>
-                  <div className="">
-                    <p className="text-base text-slate-700 dark:text-black">
-                      <span className="font-semibold">Due: </span>
-                      {props.details?.delivery_date &&
-                        props.details.delivery_date.split(" ")[0]}
-                    </p>
-                    <p className="text-base text-slate-700 dark:text-black">
-                      {props.details?.delivery_date &&
-                        props.details.delivery_date.split(" ")[1]}
-                    </p>
-                    <p className="text-base text-slate-700 dark:text-black">
-                      {props.details?.timeline_days && props.details.timeline_days} day(s)
-                    </p>
-                  </div>
-                </div>
-                <div className="w-full lg:w-1/3 lg:text-center">
-                  <p className="text-base text-sky-blue">
+                  <p className="w-full lg:w-1/3 text-base text-sky-blue">
                     {userDetails.firstname && userDetails.firstname}
                   </p>
                 </div>
+                
+                <p className="text-base text-slate-700 dark:text-black">
+                  <span className="font-semibold">Description: </span>
+                  {props.details?.description && props.details.description}
+                </p>
               </div>
             </div>
+            {/* end of job title */}
 
-            <div className="mt-5 bg-white p-4 rounded-md shadow-md">
+            {/* job details */}
+            <div className="w-full lg:w-1/2">
+              <p className="text-base text-sky-blue">Delivery Detail</p>
+              <div className="mt-2">
+                  <p className="text-base text-slate-700 dark:text-black">
+                    <span className="font-semibold">Due: </span>
+                    {props.details?.delivery_date &&
+                      props.details.delivery_date.split(" ")[0]}
+                  </p>
+                  <p className="py-2 text-base text-slate-700 dark:text-black">
+                    {props.details?.delivery_date &&
+                      props.details.delivery_date.split(" ")[1]}
+                  </p>
+                  <p className="text-base text-slate-700 dark:text-black">
+                    {props.details?.timeline_days && props.details.timeline_days} day(s)
+                  </p>
+              </div>
+            </div>
+            {/* end of job details */}
+        </div>
+
+        <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="">
-              <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-y border-slate-300 outline-none"
-                  rows="10"
-                  style={{ resize: "none" }}
-                  name='message'
-                  onChange={handleMessageChange}
-                  value={messageToSend}
-                />
+                <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Actions</h1>
+                <p className="my-3 py-1 text-base">
+                  Waiting for the completion message from the client before you can approve.
+                </p>
               </div>
 
-              {/* ERROR DISPLAY AND SUBMIT BUTTON */}
-              <div className="w-full">
-                {/* error or success display */}
-                {requestStatus.message != "" &&
-                  (!requestStatus.status ? (
-                    <div
-                      className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                    >
-                      {requestStatus.message}
+              {/* TEXTAREA SECTION */}
+              <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> */}
+                  <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 h-[300px] 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 h-[300px] 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>
-                  ) : (
-                    requestStatus.status && (
+                  }
+                </div>
+
+                {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+                <div className="w-full">
+                  {/* error or success display */}
+                  {requestStatus.message != "" &&
+                    (!requestStatus.status ? (
                       <div
-                        className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                        className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
                       >
                         {requestStatus.message}
                       </div>
-                    )
-                  ))}
-                </div>
-                {/* End of error or success display */}
+                    ) : (
+                      requestStatus.status && (
+                        <div
+                          className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                        >
+                          {requestStatus.message}
+                        </div>
+                      )
+                    ))}
+                  </div>
+                  {/* End of error or success display */}
 
-              {/* Buttons Sections */}
-              <div className="py-2 mb-8 sm:flex sm:justify-center sm:items-center">
-                <div className="w-full sm:w-2/4 mb-5 sm:mb-0">
-                  <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>
+                {/* Buttons Sections */}
+                <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"
-                  >
-                      <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' />
+                  <div className="w-full sm:w-2/4 flex justify-between items-center space-x-2">
+                    <button
+                        type="button"
+                        onClick={handleClearAll}
+                        className="border-gradient text-base tracking-wide px-4 py-3 rounded-full"
+                    >
+                        <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>
+                      )
                       :
-                      <span className="text-white">Send</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>
-
+                {/* end of Buttons Sections  */}
               </div>
-              {/* end of Buttons Sections  */}
-            </div>
-          </div>
-
-          {/* ACTION SECTION */}
-          <div className="w-full lg:w-1/2 h-full">
-            <div className="py-[20px] bg-white px-4 rounded-md shadow-md">
-              <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Actions</h1>
-
-              <p className="my-3 py-1 text-base">
-                Waiting for the completion message from the client before you can approve.
-              </p>
+              {/* END OF TEXTAREA */}
             </div>
 
-            <div className="mt-5 bg-white p-4 rounded-md shadow-md">
-              <div className="">
-                <p className="text-lg font-bold text-dark-gray dark:text-black tracking-wide">Message</p>
-                {props.activeJobMesList.loading ?
-                <LoadingSpinner size='16' color='sky-blue' />
-                :
-                <ActiveJobMessage activeJobMesList={props.activeJobMesList} />
-                }
-              </div>
+            {/* MESSAGE SECTION */}
+            <div className="w-full lg:w-1/2">
+              <p className="text-lg font-bold text-dark-gray dark:text-black tracking-wide">Message</p>
+              {props.activeJobMesList.loading ?
+              <LoadingSpinner size='16' color='sky-blue' />
+              :
+              <ActiveJobMessage activeJobMesList={props.activeJobMesList} />
+              }
             </div>
-
-          </div>
+            {/* END OF MESSAGE */}
         </div>
 
     </Layout>