diff --git a/src/backend/app/organisations/organisation_schemas.py b/src/backend/app/organisations/organisation_schemas.py
index 7939c6be17..10ce7c342a 100644
--- a/src/backend/app/organisations/organisation_schemas.py
+++ b/src/backend/app/organisations/organisation_schemas.py
@@ -66,6 +66,7 @@ def parse_organisation_input(
     created_by: Optional[int] = Form(None),
     community_type: CommunityType = Form(None),
     description: Optional[str] = Form(None),
+    associated_email: Optional[str] = Form(None),
     url: Optional[str] = Form(None),
     type: OrganisationType = Form(None, alias="type"),
     odk_central_url: Optional[str] = Form(None),
@@ -86,6 +87,7 @@ def parse_organisation_input(
         slug=slug,
         created_by=created_by,
         description=description,
+        associated_email=associated_email,
         url=url,
         community_type=community_type,
         type=type,
diff --git a/src/frontend/src/api/OrganisationService.ts b/src/frontend/src/api/OrganisationService.ts
index 0a59ff53fb..d3a7ede312 100644
--- a/src/frontend/src/api/OrganisationService.ts
+++ b/src/frontend/src/api/OrganisationService.ts
@@ -79,12 +79,9 @@ export const MyOrganisationDataService = (url: string) => {
 
 export const PostOrganisationDataService = (url: string, payload: any) => {
   return async (dispatch: AppDispatch) => {
-    dispatch(OrganisationAction.SetOrganisationFormData({}));
     dispatch(OrganisationAction.PostOrganisationDataLoading(true));
 
     const postOrganisationData = async (url, payload) => {
-      dispatch(OrganisationAction.SetOrganisationFormData(payload));
-
       try {
         const generateApiFormData = new FormData();
         appendObjectToFormData(generateApiFormData, payload);
@@ -99,6 +96,8 @@ export const PostOrganisationDataService = (url: string, payload: any) => {
 
         dispatch(OrganisationAction.PostOrganisationDataLoading(false));
         dispatch(OrganisationAction.postOrganisationData(resp));
+        dispatch(OrganisationAction.SetOrganisationFormData({}));
+
         dispatch(
           CommonActions.SetSnackBar({
             open: true,
@@ -132,7 +131,16 @@ export const GetIndividualOrganizationService = (url: string) => {
         const getOrganisationDataResponse = await axios.get(url);
         const response: GetOrganisationDataModel = getOrganisationDataResponse.data;
         dispatch(OrganisationAction.SetIndividualOrganization(response));
-      } catch (error) {}
+      } catch (error) {
+        dispatch(
+          CommonActions.SetSnackBar({
+            open: true,
+            message: error.response.data.detail || 'Failed to fetch organization.',
+            variant: 'error',
+            duration: 2000,
+          }),
+        );
+      }
     };
     await getOrganisationData(url);
   };
@@ -140,12 +148,9 @@ export const GetIndividualOrganizationService = (url: string) => {
 
 export const PatchOrganizationDataService = (url: string, payload: any) => {
   return async (dispatch: AppDispatch) => {
-    dispatch(OrganisationAction.SetOrganisationFormData({}));
     dispatch(OrganisationAction.PostOrganisationDataLoading(true));
 
     const patchOrganisationData = async (url, payload) => {
-      dispatch(OrganisationAction.SetOrganisationFormData(payload));
-
       try {
         const generateApiFormData = new FormData();
         appendObjectToFormData(generateApiFormData, payload);
@@ -159,6 +164,7 @@ export const PatchOrganizationDataService = (url: string, payload: any) => {
         const resp: GetOrganisationDataModel = patchOrganisationData.data;
         dispatch(OrganisationAction.PostOrganisationDataLoading(false));
         dispatch(OrganisationAction.postOrganisationData(resp));
+        dispatch(OrganisationAction.SetOrganisationFormData({}));
         dispatch(
           CommonActions.SetSnackBar({
             open: true,
diff --git a/src/frontend/src/components/ApproveOrganization/ApproveOrganizationHeader.tsx b/src/frontend/src/components/ApproveOrganization/ApproveOrganizationHeader.tsx
index 79b90db9ac..9cd5fc5c84 100644
--- a/src/frontend/src/components/ApproveOrganization/ApproveOrganizationHeader.tsx
+++ b/src/frontend/src/components/ApproveOrganization/ApproveOrganizationHeader.tsx
@@ -12,7 +12,7 @@ const ApproveOrganizationHeader = () => {
         </div>
         <div
           className="hover:fmtm-bg-gray-200 fmtm-rounded-full fmtm-p-2 fmtm-duration-300 fmtm-cursor-pointer"
-          onClick={() => navigate('/organisation')}
+          onClick={() => navigate('/organization')}
         >
           <AssetModules.CloseIcon />
         </div>
diff --git a/src/frontend/src/components/ApproveOrganization/OrganizationForm.tsx b/src/frontend/src/components/ApproveOrganization/OrganizationForm.tsx
index 6752ce4861..0e0e6153ad 100644
--- a/src/frontend/src/components/ApproveOrganization/OrganizationForm.tsx
+++ b/src/frontend/src/components/ApproveOrganization/OrganizationForm.tsx
@@ -52,7 +52,7 @@ const OrganizationForm = () => {
     if (organizationApprovalSuccess) {
       dispatch(OrganisationAction.SetOrganisationFormData({}));
       dispatch(OrganisationAction.SetOrganizationApprovalStatus(false));
-      navigate('/organisation');
+      navigate('/organization');
     }
   }, [organizationApprovalSuccess]);
 
@@ -82,6 +82,15 @@ const OrganizationForm = () => {
           fieldType="text"
           disabled
         />
+        <InputTextField
+          id="associated_email"
+          name="associated_email"
+          label="Email"
+          value={organisationFormData?.associated_email}
+          onChange={() => {}}
+          fieldType="text"
+          disabled
+        />
         <TextArea
           id="description"
           name="description"
diff --git a/src/frontend/src/components/CreateEditOrganization/ConsentDetailsForm.tsx b/src/frontend/src/components/CreateEditOrganization/ConsentDetailsForm.tsx
index 3c89728b54..c150a06ca0 100644
--- a/src/frontend/src/components/CreateEditOrganization/ConsentDetailsForm.tsx
+++ b/src/frontend/src/components/CreateEditOrganization/ConsentDetailsForm.tsx
@@ -87,7 +87,7 @@ const ConsentDetailsForm = () => {
             btnText="Cancel"
             btnType="other"
             className="fmtm-font-bold"
-            onClick={() => navigate('/organisation')}
+            onClick={() => navigate('/organization')}
           />
           <Button btnText="NEXT" btnType="primary" className="fmtm-font-bold" onClick={handleSubmit} />
         </div>
diff --git a/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationForm.tsx b/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationForm.tsx
index d4d5b21f47..d35e91778f 100644
--- a/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationForm.tsx
+++ b/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationForm.tsx
@@ -1,11 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect } from 'react';
 import Button from '@/components/common/Button';
 import InputTextField from '@/components/common/InputTextField';
 import TextArea from '@/components/common/TextArea';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { OrganisationAction } from '@/store/slices/organisationSlice';
 import useForm from '@/hooks/useForm';
-import AssetModules from '@/shared/AssetModules';
 import OrganizationDetailsValidation from '@/components/CreateEditOrganization/validation/OrganizationDetailsValidation';
 import RadioButton from '@/components/common/RadioButton';
 import {
@@ -18,6 +17,10 @@ import InstructionsSidebar from '@/components/CreateEditOrganization/Instruction
 import { CustomCheckbox } from '@/components/common/Checkbox';
 import { organizationTypeOptionsType } from '@/models/organisation/organisationModel';
 import { useAppDispatch, useAppSelector } from '@/types/reduxTypes';
+import UploadArea from '@/components/common/UploadArea';
+import { CommonActions } from '@/store/slices/CommonSlice';
+
+const API_URL = import.meta.env.VITE_API_URL;
 
 const organizationTypeOptions: organizationTypeOptionsType[] = [
   { name: 'osm_community', value: 'OSM_COMMUNITY', label: 'OSM Community' },
@@ -31,43 +34,48 @@ const CreateEditOrganizationForm = ({ organizationId }: { organizationId: string
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
   const [searchParams, setSearchParams] = useSearchParams();
-  const inputFileRef = useRef<any>(null);
   const organisationFormData = useAppSelector((state) => state.organisation.organisationFormData);
   const postOrganisationDataLoading = useAppSelector((state) => state.organisation.postOrganisationDataLoading);
   const postOrganisationData = useAppSelector((state) => state.organisation.postOrganisationData);
-  const [previewSource, setPreviewSource] = useState<any>('');
 
   const submission = () => {
     if (!organizationId) {
       const { fillODKCredentials, ...filteredValues } = values;
-      dispatch(PostOrganisationDataService(`${import.meta.env.VITE_API_URL}/organisation`, filteredValues));
+      dispatch(
+        PostOrganisationDataService(`${API_URL}/organisation`, {
+          ...filteredValues,
+          logo: filteredValues.logo ? filteredValues.logo?.[0].file : null,
+        }),
+      );
     } else {
       const { fillODKCredentials, ...filteredValues } = values;
-      const changedValues = diffObject(organisationFormData, filteredValues);
+      let changedValues = diffObject(organisationFormData, filteredValues);
+      if (changedValues.logo) {
+        changedValues = {
+          ...changedValues,
+          logo: changedValues.logo?.length > 0 ? changedValues.logo?.[0].file : null,
+        };
+      }
       if (Object.keys(changedValues).length > 0) {
+        dispatch(PatchOrganizationDataService(`${API_URL}/organisation/${organizationId}`, changedValues));
+      } else {
         dispatch(
-          PatchOrganizationDataService(`${import.meta.env.VITE_API_URL}/organisation/${organizationId}`, changedValues),
+          CommonActions.SetSnackBar({
+            open: true,
+            message: 'Organization details up to date',
+            variant: 'info',
+            duration: 2000,
+          }),
         );
       }
     }
   };
-
   const { handleSubmit, handleChange, handleCustomChange, values, errors }: any = useForm(
     organisationFormData,
     submission,
     OrganizationDetailsValidation,
   );
 
-  const previewFile = (file: File) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(file); //reads file as data url (base64 encoding)
-    reader.onload = () => {
-      if (reader) {
-        setPreviewSource(reader?.result);
-      }
-    };
-  };
-
   // redirect to manage-org page after post success
   useEffect(() => {
     if (postOrganisationData) {
@@ -85,14 +93,14 @@ const CreateEditOrganizationForm = ({ organizationId }: { organizationId: string
       if (searchParams.get('popup') === 'true') {
         window.close();
       } else {
-        navigate('/organisation');
+        navigate('/organization');
       }
     }
   }, [postOrganisationData]);
 
   useEffect(() => {
     if (organizationId) {
-      dispatch(GetIndividualOrganizationService(`${import.meta.env.VITE_API_URL}/organisation/${organizationId}`));
+      dispatch(GetIndividualOrganizationService(`${API_URL}/organisation/${organizationId}`));
     }
   }, [organizationId]);
 
@@ -151,6 +159,16 @@ const CreateEditOrganizationForm = ({ organizationId }: { organizationId: string
               errorMsg={errors.url}
             />
           )}
+          <InputTextField
+            id="associated_email"
+            name="associated_email"
+            label="Email"
+            value={values?.associated_email}
+            onChange={handleChange}
+            fieldType="text"
+            required
+            errorMsg={errors.associated_email}
+          />
           <TextArea
             id="description"
             name="description"
@@ -218,43 +236,15 @@ const CreateEditOrganizationForm = ({ organizationId }: { organizationId: string
               required
             />
           )}
-          <div className="flex items-center">
-            <p className="fmtm-text-[1rem] fmtm-mb-2 fmtm-font-semibold">Upload Logo</p>
-            <div className="fmtm-flex fmtm-flex-col fmtm-gap-5">
-              <input
-                ref={inputFileRef}
-                type="file"
-                className="fmtm-max-w-[250px]"
-                onChange={(e) => {
-                  handleCustomChange('logo', e.target?.files?.[0]);
-                  if (e.target?.files?.[0]) {
-                    previewFile(e.target?.files?.[0]);
-                  }
-                }}
-                accept="image/png, image/gif, image/jpeg"
-              />
-              {(previewSource || values.logo) && (
-                <div className="fmtm-relative fmtm-w-fit">
-                  <div className="fmtm-absolute -fmtm-top-3 -fmtm-right-3" title="Remove Logo">
-                    <AssetModules.DeleteIcon
-                      style={{ fontSize: '28px' }}
-                      className="fmtm-text-primaryRed hover:fmtm-text-red-700 fmtm-cursor-pointer"
-                      onClick={() => {
-                        inputFileRef.current.value = '';
-                        handleCustomChange('logo', '');
-                        setPreviewSource('');
-                      }}
-                    />
-                  </div>
-                  <img
-                    src={previewSource ? previewSource : values.logo ? values.logo : ''}
-                    alt=""
-                    className="fmtm-h-[100px] fmtm-rounded-sm fmtm-border-[1px]"
-                  />
-                </div>
-              )}
-            </div>
-          </div>
+          <UploadArea
+            title="Upload Logo"
+            label="Please upload .png, .gif, .jpeg"
+            data={values?.logo}
+            onUploadFile={(updatedFiles) => {
+              handleCustomChange('logo', updatedFiles);
+            }}
+            acceptedInput="image/*"
+          />
         </div>
 
         <div className="fmtm-flex fmtm-items-center fmtm-justify-center fmtm-gap-6 fmtm-mt-8 lg:fmtm-mt-16">
diff --git a/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationHeader.tsx b/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationHeader.tsx
index 88acbe80b9..b55c2348d3 100644
--- a/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationHeader.tsx
+++ b/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationHeader.tsx
@@ -14,7 +14,7 @@ const CreateEditOrganizationHeader = ({ organizationId }: { organizationId: stri
         </div>
         <div
           className="hover:fmtm-bg-gray-200 fmtm-rounded-full fmtm-p-2 fmtm-duration-300 fmtm-cursor-pointer"
-          onClick={() => navigate('/organisation')}
+          onClick={() => navigate('/organization')}
         >
           <AssetModules.CloseIcon />
         </div>
diff --git a/src/frontend/src/components/CreateEditOrganization/validation/OrganizationDetailsValidation.ts b/src/frontend/src/components/CreateEditOrganization/validation/OrganizationDetailsValidation.ts
index f440f8a3fe..01c2de5ded 100644
--- a/src/frontend/src/components/CreateEditOrganization/validation/OrganizationDetailsValidation.ts
+++ b/src/frontend/src/components/CreateEditOrganization/validation/OrganizationDetailsValidation.ts
@@ -14,6 +14,7 @@ interface OrganisationValues {
   osm_profile: string;
   community_type: string;
   fillODKCredentials: boolean;
+  associated_email: string;
 }
 interface ValidationErrors {
   logo?: string;
@@ -27,8 +28,11 @@ interface ValidationErrors {
   osm_profile?: string;
   community_type?: string;
   fillODKCredentials?: boolean;
+  associated_email?: string;
 }
 
+const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
 function OrganizationDetailsValidation(values: OrganisationValues) {
   const errors: ValidationErrors = {};
 
@@ -55,6 +59,12 @@ function OrganizationDetailsValidation(values: OrganisationValues) {
     errors.odk_central_url = 'Invalid URL.';
   }
 
+  if (isInputEmpty(values?.associated_email)) {
+    errors.associated_email = 'Email is Required.';
+  } else if (!emailPattern.test(values?.associated_email)) {
+    errors.associated_email = 'Invalid Email.';
+  }
+
   if (values?.fillODKCredentials && isInputEmpty(values.odk_central_url)) {
     errors.odk_central_url = 'ODK central URL is Required.';
   }
diff --git a/src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx b/src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx
index 3d3fd11e0c..9a84cd0968 100644
--- a/src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx
+++ b/src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useAppDispatch, useAppSelector } from '@/types/reduxTypes';
-import UploadArea from '../../common/UploadArea';
-import Button from '../../common/Button';
+import UploadArea from '@/components/common/UploadArea';
+import Button from '@/components/common/Button';
 import { CustomSelect } from '@/components/common/Select';
 import CoreModules from '@/shared/CoreModules';
 import { FormCategoryService } from '@/api/CreateProjectService';
@@ -9,19 +9,20 @@ import { DownloadProjectForm } from '@/api/Project';
 import { PostFormUpdate } from '@/api/CreateProjectService';
 import useDocumentTitle from '@/utilfunctions/useDocumentTitle';
 
+const API_URL = import.meta.env.VITE_API_URL;
+
 type FileType = {
   id: string;
-  name: string;
-  url?: File;
-  isDeleted: boolean;
+  file: File;
+  previewURL: string;
 };
 
 const FormUpdateTab = ({ projectId }) => {
   useDocumentTitle('Manage Project: Form Update');
   const dispatch = useAppDispatch();
 
-  const [uploadForm, setUploadForm] = useState<FileType[] | null>(null);
-  const [error, setError] = useState({ formError: '', categoryError: '' });
+  const [uploadForm, setUploadForm] = useState<FileType[] | null>([]);
+  const [formError, setFormError] = useState(false);
 
   const xFormId = CoreModules.useAppSelector((state) => state.createproject.editProjectDetails.odk_form_id);
   const formCategoryList = useAppSelector((state) => state.createproject.formCategoryList);
@@ -30,15 +31,19 @@ const FormUpdateTab = ({ projectId }) => {
   const formUpdateLoading = useAppSelector((state) => state.createproject.formUpdateLoading);
 
   useEffect(() => {
-    dispatch(FormCategoryService(`${import.meta.env.VITE_API_URL}/central/list-forms`));
+    dispatch(FormCategoryService(`${API_URL}/central/list-forms`));
   }, []);
 
   const onSave = () => {
+    if (uploadForm?.length === 0) {
+      setFormError(true);
+      return;
+    }
     dispatch(
-      PostFormUpdate(`${import.meta.env.VITE_API_URL}/projects/update-form?project_id=${projectId}`, {
+      PostFormUpdate(`${API_URL}/projects/update-form?project_id=${projectId}`, {
         xformId: xFormId,
         category: selectedCategory,
-        upload: uploadForm && uploadForm?.[0]?.url,
+        upload: uploadForm && uploadForm?.[0]?.file,
       }),
     );
   };
@@ -57,7 +62,6 @@ const FormUpdateTab = ({ projectId }) => {
           className="fmtm-max-w-[13.5rem]"
           disabled
         />
-        {error.categoryError && <p className="fmtm-text-primaryRed fmtm-text-base">{error.categoryError}</p>}
         <p className="fmtm-text-base fmtm-mt-2">
           The survey type will be used to set the OpenStreetMap{' '}
           <a
@@ -77,13 +81,7 @@ const FormUpdateTab = ({ projectId }) => {
           <a
             className="fmtm-text-blue-600 hover:fmtm-text-blue-700 fmtm-cursor-pointer fmtm-underline"
             onClick={() =>
-              dispatch(
-                DownloadProjectForm(
-                  `${import.meta.env.VITE_API_URL}/projects/download-form/${projectId}`,
-                  'form',
-                  projectId,
-                ),
-              )
+              dispatch(DownloadProjectForm(`${API_URL}/projects/download-form/${projectId}`, 'form', projectId))
             }
           >
             download
@@ -96,15 +94,14 @@ const FormUpdateTab = ({ projectId }) => {
         <UploadArea
           title="Upload Form"
           label="Please upload .xls, .xlsx, .xml file"
-          multiple={false}
           data={uploadForm || []}
-          filterKey="url"
-          onUploadFile={(updatedFiles: FileType[]) => {
-            setUploadForm(updatedFiles);
+          onUploadFile={(updatedFiles) => {
+            setUploadForm(updatedFiles as FileType[]);
+            formError && setFormError(false);
           }}
           acceptedInput=".xls, .xlsx, .xml"
         />
-        {error.formError && <p className="fmtm-text-primaryRed fmtm-text-base">{error.formError}</p>}
+        {formError && <p className="fmtm-text-primaryRed fmtm-text-sm fmtm-pt-1">Please upload a form</p>}
       </div>
       <div className="fmtm-flex fmtm-justify-center">
         <Button
diff --git a/src/frontend/src/components/common/UploadArea.tsx b/src/frontend/src/components/common/UploadArea.tsx
index 433aca2120..5a8c90d720 100644
--- a/src/frontend/src/components/common/UploadArea.tsx
+++ b/src/frontend/src/components/common/UploadArea.tsx
@@ -3,60 +3,60 @@ import { v4 as uuidv4 } from 'uuid';
 import { CommonActions } from '@/store/slices/CommonSlice';
 import AssetModules from '@/shared/AssetModules';
 import { useAppDispatch } from '@/types/reduxTypes';
+import { convertFileUrlToFileArray } from '@/utilfunctions';
+import isEmpty from '@/utilfunctions/isEmpty';
 
-type FileType = {
-  id: string;
-  name: string;
-  url?: File;
-  isDeleted: boolean;
-};
+type FileType =
+  | {
+      id: string;
+      file: File;
+      previewURL: string;
+    }
+  | { id: string; file: { name: string }; previewURL: string };
 
 type uploadAreaPropType = {
   title: string;
   label: string;
-  multiple: boolean;
-  data: FileType[];
-  filterKey: string;
+  data: FileType[] | string;
   onUploadFile: (updatedFiles: FileType[]) => void;
   acceptedInput: string;
 };
 
-const UploadArea = ({ title, label, acceptedInput, data, onUploadFile, multiple, filterKey }: uploadAreaPropType) => {
-  const fileInputRef = useRef<HTMLInputElement>(null);
+const UploadArea = ({ title, label, acceptedInput, data, onUploadFile }: uploadAreaPropType) => {
   const dispatch = useAppDispatch();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
   const [selectedFiles, setSelectedFiles] = useState<FileType[]>([]);
 
-  function isEmpty(obj) {
-    if (Array.isArray(obj)) {
-      return obj.length === 0;
+  useEffect(() => {
+    let uploaded: [] = [];
+    if (!data) return;
+    // @ts-ignore
+    if (data && typeof data?.[0] !== 'string') {
+      uploaded = data as [];
+    } else {
+      uploaded = convertFileUrlToFileArray(data as string) as [];
     }
-    return Object.keys(obj).length === 0;
-  }
+    // @ts-ignore
+    setSelectedFiles(uploaded);
+  }, [data]);
 
   const handleOpenFileExplorer = () => {
     fileInputRef?.current?.click();
   };
-  useEffect(() => {
-    setSelectedFiles(data);
-  }, [data]);
 
   const changeHandler = (event) => {
     const { files } = event.target;
     const fileList = Object.values(files).map((item: any) => {
-      const { name } = item;
       const file = item;
       const id = uuidv4();
-      const isDeleted = false;
-      return { id, name, [filterKey]: file, isDeleted };
+      return { id, file: file, previewURL: URL.createObjectURL(file) };
     });
-    if (multiple) {
-      onUploadFile([...fileList, ...data]);
-    } else {
-      onUploadFile(fileList);
-    }
+    onUploadFile(fileList);
   };
+
   const handleDeleteFile = (id: string) => {
-    const updatedList = data.filter((item: FileType) => item.id !== id);
+    const updatedList = selectedFiles.filter((item: FileType) => item.id !== id);
     if (fileInputRef.current) {
       fileInputRef.current.value = '';
     }
@@ -85,18 +85,15 @@ const UploadArea = ({ title, label, acceptedInput, data, onUploadFile, multiple,
             const { files } = e.dataTransfer;
             const fileList: FileType[] = [];
             Object.values(files).map((item) => {
-              const { name } = item;
               const file = item;
               const fileType = file.name.split('.')?.pop();
               if (acceptedInput === 'all') {
-                const isDeleted = false;
                 const id = uuidv4();
-                return fileList.push({ id, name, [filterKey]: file, isDeleted });
+                return fileList.push({ id, file, previewURL: URL.createObjectURL(file) });
               }
               if (fileType && acceptedInput.includes(fileType)) {
                 const id = uuidv4();
-                const isDeleted = false;
-                return fileList.push({ id, name, [filterKey]: file, isDeleted });
+                return fileList.push({ id, file, previewURL: URL.createObjectURL(file) });
               }
               dispatch(
                 CommonActions.SetSnackBar({
@@ -109,13 +106,9 @@ const UploadArea = ({ title, label, acceptedInput, data, onUploadFile, multiple,
               return null;
             });
             if (fileList.length > 0) {
-              if (multiple) {
-                onUploadFile([...fileList, ...data]);
-              } else {
-                onUploadFile([fileList.at(fileList.length - 1) as FileType]);
-              }
+              onUploadFile([fileList.at(fileList.length - 1) as FileType]);
             } else {
-              onUploadFile(data);
+              onUploadFile(data as FileType[]);
             }
           }
         }}
@@ -126,7 +119,6 @@ const UploadArea = ({ title, label, acceptedInput, data, onUploadFile, multiple,
           ref={fileInputRef}
           type="file"
           accept={acceptedInput === 'all' ? '' : acceptedInput}
-          multiple={multiple}
           onChange={changeHandler}
         />
         <div className="fmtm-flex fmtm-justify-center">
@@ -137,27 +129,28 @@ const UploadArea = ({ title, label, acceptedInput, data, onUploadFile, multiple,
         </div>
       </div>
       {selectedFiles?.length > 0 && (
-        <div className="fmtm-overflow-hidden fmtm-overflow-y-scroll scrollbar fmtm-h-fit">
+        <div className="fmtm-mt-4 fmtm-w-full">
           {selectedFiles?.map((item, i) => (
-            <div
-              key={item.id}
-              className="fmtm-px-3 fmtm-flex fmtm-items-center fmtm-relative fmtm-border-b-regular fmtm-border-border_color"
-            >
-              <div className="fmtm-h-10 fmtm-w-10 fmtm-rounded-full fmtm-bg-active_bg fmtm-border-regular fmtm-p-2 fmtm-mr-2 fmtm-border-border_color ">
-                <AssetModules.DescriptionIcon className="fmtm-text-active_text" />
-              </div>
-              <div className="fmtm-py-3 fmtm-pr-2 fmtm-w-5/6">
-                <div className="fmtm-text-button-1 fmtm-w-full fmtm-text-ellipsis">{item.name}</div>
+            <div key={item.id} className="fmtm-flex fmtm-items-center fmtm-h-20 fmtm-w-full">
+              {acceptedInput.includes('image') ? (
+                <img src={item.previewURL} className="fmtm-h-full fmtm-z-50" />
+              ) : (
+                <div className="fmtm-p-3 fmtm-rounded-full fmtm-bg-red-50">
+                  <AssetModules.DescriptionIcon className="!fmtm-text-[2rem] fmtm-text-[#4C4C4C]" />
+                </div>
+              )}
+              <div className="fmtm-flex-1 fmtm-text-ellipsis fmtm-truncate fmtm-ml-4" title={item.file.name}>
+                {item.file.name}
               </div>
-              <div className="fmtm-flex fmtm-absolute fmtm-right-3">
+              <div className="fmtm-flex">
                 <div
                   role="button"
                   tabIndex={0}
                   onKeyDown={() => {}}
                   onClick={() => handleDeleteFile(item.id)}
-                  className="fmtm-h-10 fmtm-w-10 fmtm-p-2"
+                  className="fmtm-px-4"
                 >
-                  <AssetModules.DeleteIcon className="fmtm-text-[#FF4538]" />
+                  <AssetModules.DeleteIcon className="fmtm-text-grey-400 hover:fmtm-text-[#FF4538]" />
                 </div>
               </div>
             </div>
diff --git a/src/frontend/src/components/organisation/OrganisationGridCard.tsx b/src/frontend/src/components/organisation/OrganisationGridCard.tsx
index 01096035ee..263ff3b09d 100644
--- a/src/frontend/src/components/organisation/OrganisationGridCard.tsx
+++ b/src/frontend/src/components/organisation/OrganisationGridCard.tsx
@@ -36,7 +36,7 @@ const OrganisationGridCard = ({ filteredData, allDataLength }: organizationGridC
             sx={cardStyle}
             onClick={() => {
               if (!data?.approved && authDetails && authDetails?.['role'] === user_roles.ADMIN) {
-                navigate(`/approve-organization/${data?.id}`);
+                navigate(`/organization/approve/${data?.id}`);
               }
             }}
           >
diff --git a/src/frontend/src/routes.jsx b/src/frontend/src/routes.jsx
index 3993d8e8ad..49299b39b1 100755
--- a/src/frontend/src/routes.jsx
+++ b/src/frontend/src/routes.jsx
@@ -31,7 +31,7 @@ const routes = createBrowserRouter([
         ),
       },
       {
-        path: '/organisation',
+        path: '/organization',
         element: (
           <ProtectedRoute>
             <ErrorBoundary>
@@ -41,7 +41,7 @@ const routes = createBrowserRouter([
         ),
       },
       {
-        path: '/create-organization',
+        path: '/organization/create',
         element: (
           <ProtectedRoute>
             <ErrorBoundary>
@@ -51,7 +51,7 @@ const routes = createBrowserRouter([
         ),
       },
       {
-        path: '/edit-organization/:id',
+        path: '/organization/edit/:id',
         element: (
           <ProtectedRoute>
             <ErrorBoundary>
@@ -61,7 +61,7 @@ const routes = createBrowserRouter([
         ),
       },
       {
-        path: '/approve-organization/:id',
+        path: '/organization/approve/:id',
         element: (
           <ProtectedRoute>
             <ErrorBoundary>
diff --git a/src/frontend/src/utilfunctions/index.ts b/src/frontend/src/utilfunctions/index.ts
new file mode 100644
index 0000000000..e490d83c13
--- /dev/null
+++ b/src/frontend/src/utilfunctions/index.ts
@@ -0,0 +1,19 @@
+import { v4 as uuidv4 } from 'uuid';
+
+export function convertFileUrlToFileArray(url: string): { id: string; file: { name: string }; previewURL: string }[] {
+  const fileArray = url.split('/');
+  const fileName = fileArray[fileArray.length - 1];
+  return [
+    {
+      id: uuidv4(),
+      file: { name: fileName },
+      previewURL: url,
+    },
+  ];
+}
+
+export function getFileNameFromURL(url: string) {
+  const fileArray = url.split('/');
+  const fileName = fileArray[fileArray.length - 1];
+  return fileName;
+}
diff --git a/src/frontend/src/utilfunctions/isEmpty.ts b/src/frontend/src/utilfunctions/isEmpty.ts
new file mode 100644
index 0000000000..bc60778bb8
--- /dev/null
+++ b/src/frontend/src/utilfunctions/isEmpty.ts
@@ -0,0 +1,14 @@
+/**
+ *
+ * Check if an object or an array is empty.
+ *
+ * @param {object|array} obj  - object or array
+ * @returns {boolean} boolean value whether the object or array is empty or not.
+ */
+export default function isEmpty(obj: object | []): boolean {
+  if (!obj) return true;
+  if (Array.isArray(obj)) {
+    return obj.length === 0;
+  }
+  return Object.keys(obj)?.length === 0;
+}
diff --git a/src/frontend/src/utilities/CustomDrawer.tsx b/src/frontend/src/utilities/CustomDrawer.tsx
index 82baffaf45..40d48e2dd0 100644
--- a/src/frontend/src/utilities/CustomDrawer.tsx
+++ b/src/frontend/src/utilities/CustomDrawer.tsx
@@ -26,7 +26,7 @@ const MenuItems = [
   },
   {
     name: 'Manage Organizations',
-    ref: '/organisation',
+    ref: '/organization',
     isExternalLink: false,
     isActive: true,
   },
diff --git a/src/frontend/src/utilities/PrimaryAppBar.tsx b/src/frontend/src/utilities/PrimaryAppBar.tsx
index 7e87d5eb27..b39e098b76 100755
--- a/src/frontend/src/utilities/PrimaryAppBar.tsx
+++ b/src/frontend/src/utilities/PrimaryAppBar.tsx
@@ -93,7 +93,7 @@ export default function PrimaryAppBar() {
               Explore Projects
             </Link>
             <Link
-              to="/organisation"
+              to="/organization"
               className={`fmtm-uppercase fmtm-text-base fmtm-text-[#717171] hover:fmtm-text-[#3f3d3d] fmtm-duration-200 ${
                 activeTab === 1 ? 'fmtm-border-[#706E6E]' : 'fmtm-border-white'
               } fmtm-pb-1 fmtm-border-b-2`}
diff --git a/src/frontend/src/views/Organisation.tsx b/src/frontend/src/views/Organisation.tsx
index 903c8980dd..d588ba9e1f 100644
--- a/src/frontend/src/views/Organisation.tsx
+++ b/src/frontend/src/views/Organisation.tsx
@@ -112,7 +112,7 @@ const Organisation = () => {
               onClick={() => loadMyOrganisations()}
             />
             {authDetails && (
-              <CoreModules.Link to={'/create-organization'}>
+              <CoreModules.Link to={'/organization/create'}>
                 <CoreModules.Button
                   variant="outlined"
                   color="error"