diff --git a/src/assets/images/no-family-side.png b/src/assets/images/no-family-side.png
new file mode 100644
index 0000000..72b1c3c
Binary files /dev/null and b/src/assets/images/no-family-side.png differ
diff --git a/src/components/FamilyAcc/FamilyTable.jsx b/src/components/FamilyAcc/FamilyTable.jsx
index d514c0c..78d8e34 100644
--- a/src/components/FamilyAcc/FamilyTable.jsx
+++ b/src/components/FamilyAcc/FamilyTable.jsx
@@ -5,7 +5,9 @@ import { useNavigate, useLocation, Link } from "react-router-dom";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
 
-export default function FamilyTable({ className, familyList, loader }) {
+import familyImage from '../../assets/images/no-family-side.png'
+
+export default function FamilyTable({ className, familyList, loader, popUpHandler }) {
   const filterCategories = ["All Categories", "Explore", "Featured"];
   const [selectedCategory, setCategory] = useState(filterCategories[0]);
   const navigate = useNavigate();
@@ -32,9 +34,11 @@ export default function FamilyTable({ className, familyList, loader }) {
           <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
             <LoadingSpinner size="16" color="sky-blue" />
           </div>
-        ) : (
-          <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 relative">
-            <>
+        ) 
+        :
+        familyList?.length > 0 ?
+          (
+            <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 relative">
               <thead className="sticky top-0">
                 <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-bottom ">
                   <th className="py-4">Name</th>
@@ -44,9 +48,7 @@ export default function FamilyTable({ className, familyList, loader }) {
                 </tr>
               </thead>
               <tbody className="h-full">
-                <>
-                  {familyList?.length > 0 ? (
-                    currentFamilyList?.map((props, idx) => {
+                  {currentFamilyList?.map((props, idx) => {
                       let {
                         firstname,
                         lastname,
@@ -115,18 +117,29 @@ export default function FamilyTable({ className, familyList, loader }) {
                         </tr>
                       );
                     })
-                  ) : (
-                    <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                      <td className="p-2" colSpan="4">
-                        No Family Accounts Found!
-                      </td>
-                    </tr>
-                  )}
-                </>
+                  }
               </tbody>
-            </>
-          </table>
-        )}
+            </table>
+          )
+          : 
+          (
+          <div className="font-bold text-center text-xl md:text-2xl lg:text-4xl text-dark-gray md:flex items-center justify-between">
+            <div className="p-2 w-full md:w-1/2">
+              <p className="mb-4 p-3 md:p-16">Add your family, assign tasks, and get the whole team engaged.</p>
+              <button
+                onClick={popUpHandler}
+                type="button"
+                className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
+              >
+                Add Family
+              </button>
+            </div>
+            <div className="p-2 w-full md:w-1/2">
+              <img className='w-full' src={familyImage} alt="A Family" />
+            </div>
+          </div>
+          )
+        }
       </div>
         {/* PAGINATION BUTTON */}
         <PaginatedList
diff --git a/src/components/FamilyAcc/index.jsx b/src/components/FamilyAcc/index.jsx
index 12fcf7c..3b06dc7 100644
--- a/src/components/FamilyAcc/index.jsx
+++ b/src/components/FamilyAcc/index.jsx
@@ -158,7 +158,7 @@ export default function FamilyAcc() {
               ></div>
             </div>
           </div>
-          <FamilyTable familyList={familyList} loader={loader} />
+          <FamilyTable familyList={familyList} loader={loader} popUpHandler={popUpHandler} />
         </div>
       </div>
       {popUp && (
diff --git a/src/components/MyActiveJobs/ActiveJobs.jsx b/src/components/MyActiveJobs/ActiveJobs.jsx
index 8e56cb7..b46ad91 100644
--- a/src/components/MyActiveJobs/ActiveJobs.jsx
+++ b/src/components/MyActiveJobs/ActiveJobs.jsx
@@ -96,57 +96,54 @@ function ActiveJobs(props) {
 
    // FUNCTION TO SEND FILES
    const sendFile = async () => {
-     setRequestStatus({loading: true, status: false, message: ''})
+    setRequestStatus({loading: true, status: false, message: ''})
 
-     if(!filesToSend.length){ // checks if file to send is empty
-      setRequestStatus({loading: false, status: false, message: 'No File(s) selected'})
-      return setTimeout(()=>{
-        setRequestStatus({loading: false, status: false, message: ''})
-      }, 5000)
-    }
-    // let reqData = new FormData()
+    if(!filesToSend.length){ // checks if file to send is empty
+     setRequestStatus({loading: false, status: false, message: 'No File(s) selected'})
+     return setTimeout(()=>{
+       setRequestStatus({loading: false, status: false, message: ''})
+     }, 5000)
+   }
+
+   for(let i=0; i<=filesToSend.length-1; i++){ // Loops through files to send array and trigger upload API call
+  
+     const fileToBase64 = async () =>{ // Converts file data to base64 string
+       try {
+         const base64String = await convertFileToBase64(filesToSend[i]);
+         return base64String;
+       } catch (error) {
+         return false;
+       }
+     }
+
+     // if(await !fileToBase64()){
+     //   return
+     // }
+
+     let reqData={file_name: filesToSend[i].name, file_size: filesToSend[i].size, file_type: 'image/png', file_data: await fileToBase64(), msg_type: 'FILE', contract:props.details.contract}
     
-    // for(let files of filesToSend){
-    //   reqData.append(files.name, files)
-    // }
-    // let reqData={file_size: filesToSend[0].size, file_type: 'image/png', file_data: filesToSend[0], msg_type: 'FILE', contract:props.details.contract}
-    
-    // for(let files of filesToSend){
-    //   reqData[files.name] = files
-    // }
-
-    const fileToBase64 = async () =>{
-      try {
-        const base64String = await convertFileToBase64(filesToSend[0]);
-        return base64String;
-      } catch (error) {
-        return false;
-      }
-    }
-
-    if(await !fileToBase64()){
-      return
-    }
-
-    let reqData={file_name: filesToSend[0].name, file_size: filesToSend[0].size, file_type: 'image/png', file_data: await fileToBase64(), msg_type: 'FILE', contract:props.details.contract}
-
-  console.log(reqData)
-    ApiCall.sendFiles(reqData).then((res)=>{
-      if(res.status != 200 || res.data.internal_return < 0){
-        setRequestStatus({loading: false, status: false, message: 'Files(s) could not be sent, try again later'})
-        return
-      }
-      setRequestStatus({loading: false, status: true, message: 'File(s) Uploaded Successfully'})
-      props.reloadActiveJobList(prev => !prev) // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
-      setFilesToSend([]) // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
-    }).catch(error => {
-      setRequestStatus({loading: false, status: false, message: 'Opps! something went wrong'})
-    }).finally(()=>{
-      setTimeout(()=>{
-        setRequestStatus({loading: false, status: false, message: ''})
-      }, 5000)
-    })
-  }
+     ApiCall.sendFiles(reqData).then((res)=>{
+       // if(res.status != 200 || res.data.internal_return < 0){
+       //   setRequestStatus({loading: false, status: false, message: 'Files(s) could not be sent, try again later'})
+       //   return
+       // }
+       // setRequestStatus({loading: false, status: true, message: 'File(s) Uploaded Successfully'})
+       // props.reloadActiveJobList(prev => !prev) // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
+       // setFilesToSend([]) // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
+     }).catch(error => {
+       // setRequestStatus({loading: false, status: false, message: 'Opps! something went wrong'})
+     }).finally(()=>{
+       if(i==filesToSend.length-1){
+         setRequestStatus({loading: false, status: true, message: 'File(s) Uploaded Successfully'})
+         setFilesToSend([]) // SETS FILES TO SEND TO SEND BACK TO EMPTY ARRAY
+         props.reloadActiveJobList(prev => !prev) // MAKES ACTIVE JOB MESSAGE LIST TO RELOAD
+         setTimeout(()=>{
+           setRequestStatus({loading: false, status: false, message: ''})
+         }, 5000)
+       }
+     })
+   }
+ }
 
   return (
     <Layout>
diff --git a/src/services/UsersService.js b/src/services/UsersService.js
index 75ebb2f..c1c0b5a 100644
--- a/src/services/UsersService.js
+++ b/src/services/UsersService.js
@@ -563,7 +563,9 @@ class usersService {
     for (let data in postData) {
       formData.append(data, postData[data]);
     }
-    return this.postAuxEnd("/uploads", formData);
+  //  return this.postAuxEnd("/uploads", formData);
+
+    return this.postAuxEnd("/uploads", postData);
   }
 
   // END POINT TO DELETE  A JOB