diff --git a/src/components/file_uploads/FileUploadCom.jsx b/src/components/file_uploads/FileUploadCom.jsx
index 4fba03a..e7781fc 100644
--- a/src/components/file_uploads/FileUploadCom.jsx
+++ b/src/components/file_uploads/FileUploadCom.jsx
@@ -1,15 +1,12 @@
-import { useState } from 'react'
-import { useQuery } from '@tanstack/react-query'
+import {useState} from 'react'
+import {useQuery} from '@tanstack/react-query'
 import queryKeys from '../../services/queryKeys'
 
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
 import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
 import Icons from '../Icons'
-import { getBillings } from '../../services/siteServices'
+import {getFilesUpload} from '../../services/siteServices'
 import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString';
-// import formatNumber from '../../helpers/formatNumber'
-// import Avatar from '../../assets/user_avatar.jpg'
-
 
 export default function FileUploadCom() {
 
@@ -17,18 +14,18 @@ export default function FileUploadCom() {
     const [filter, setFilter] = useState({type: '', id: ''})
     const [willFilter, setWillFilter] = useState(false)
 
-    const handleFilter = ({target:{name, value}}) => {
-        setFilter(prev => ({...prev, [name]:value}))
+    const handleFilter = ({target: {name, value}}) => {
+        setFilter(prev => ({...prev, [name]: value}))
     }
 
     const handleFilterByParams = () => {
-        if(filter.type && !filter.id){
+        if (filter.type && !filter.id) {
             return
-        }else if(!filter.type){
+        } else if (!filter.type) {
             setPage(1)
             setWillFilter(prev => !prev)
             setFilter({type: '', id: ''})
-        }else{
+        } else {
             setPage(1)
             setWillFilter(prev => !prev)
         }
@@ -42,110 +39,135 @@ export default function FileUploadCom() {
                 page,
                 ...filterData
             }
-            return getBillings(reqData)
+            return getFilesUpload(reqData)
         },
         staleTime: 0 //0 mins
     })
-    const billingData = data?.data?.payments // BILLINGS LIST
+    const billingData = data?.data?.file_list; // file_list
+    const media_server = data?.data?.media_server; // file_list
     const pagination = data?.data?.pagination
-
+    debugger;
     return (
         <div className='w-full flex flex-col gap-8'>
-            <BreadcrumbCom title='Files' paths={['Dashboard', 'Files']} />
+            <BreadcrumbCom title='Files' paths={['Dashboard', 'Files']}/>
 
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
-                { isError ?
+                {isError ?
                     <p className='text-red-500'>{error?.message}</p>
-                :
-                <>
-                    {/* filter section */}
-                    <div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2'>
-                        <Icons name='filter' className='text-3xl' />
-                        <div className='w-full sm:max-w-48'>
-                            <select name='type' value={filter?.type} className='h-10 w-full p-2 rounded-md' onChange={handleFilter}>
-                                <option value=''>All</option>
-                                <option value='option_name'>Option Name</option>
-                                <option value='member_id'>Member ID</option>
-                            </select>
+                    :
+                    <>
+                        {/* filter section */}
+                        <div className='px-2 py-2 mb-4 flex flex-col sm:flex-row flex-wrap sm:items-center gap-2'>
+                            <Icons name='filter' className='text-3xl'/>
+                            <div className='w-full sm:max-w-48'>
+                                <select name='type' value={filter?.type} className='h-10 w-full p-2 rounded-md'
+                                        onChange={handleFilter}>
+                                    <option value=''>All</option>
+                                    <option value='file_group'>File Group</option>
+                                    <option value='member_id'>Member ID</option>
+                                </select>
+                            </div>
+                            <div className='w-full sm:max-w-48'>
+                                <input name='id' value={filter?.id} disabled={!filter.type}
+                                       className={`h-10 w-full p-2 rounded-md outline-none border border-black-aside ${!filter.type && 'opacity-30'}`}
+                                       onChange={handleFilter}/>
+                            </div>
+                            <button onClick={handleFilterByParams} disabled={filter.type && !filter.id}
+                                    className={`h-10 bg-primary px-2 py-1 rounded-md text-white font-medium sm:self-end ${(filter.type && !filter.id) && 'opacity-50'}`}>Submit
+                            </button>
                         </div>
-                        <div className='w-full sm:max-w-48'>
-                            <input name='id' value={filter?.id} disabled={!filter.type} className={`h-10 w-full p-2 rounded-md outline-none border border-black-aside ${!filter.type && 'opacity-30'}`} onChange={handleFilter} />
-                        </div>
-                        <button onClick={handleFilterByParams} disabled={filter.type && !filter.id} className={`h-10 bg-primary px-2 py-1 rounded-md text-white font-medium sm:self-end ${(filter.type && !filter.id) && 'opacity-50'}`}>Submit</button>
-                    </div>
-                     {/* end of filter section */}
+                        {/* end of filter section */}
 
-                    <TablePaginatedWrapper data={billingData} isFetching={isFetching} setPage={setPage} itemsPerPage={pagination?.limit} pagination={pagination}>
-                    {({ data }) => (
-                        <>
-                            <table className="py-2 w-full text-sm">
-                                <thead className="py-2 text-sm text-slate-500 text-left">
-                                    <tr>
-                                        <th scope="col" className="px-2 py-2">
-                                            Added
-                                        </th>
-                                        <th scope="col" className="px-2">
-                                            Option Name
-                                        </th>
-                                        <th scope="col" className="px-2">
-                                            Member ID
-                                        </th>
-                                        <th scope="col" className="px-2 text-right">
-                                            Amount
-                                        </th>
-                                        <th scope="col" className="px-2 text-right">
-                                            Status
-                                        </th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    {(data && data.length > 0) ? data?.map((item, index) => (
-                                        <tr key={index} className="py-2 border-t border-dashed border-slate-300">
-                                            <td className="px-2 py-2">
-                                                <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
-                                                <div className="text-left">
-                                                    <div className="text-base font-semibold">{getDateTimeFromDateString(item?.added)}</div>
-                                                </div>  
-                                                </div>
-                                            </td>
-                                            <td className="px-2">
-                                                <div className="text-left">
-                                                    <div className="text-base font-semibold">{item?.option_name}</div>
-                                                </div> 
-                                            </td>
-                                            <td className="px-2">
-                                                <div className="text-left">
-                                                    <div className="text-base font-semibold">{item?.member_id}</div>
-                                                </div> 
-                                            </td>
-                                             <td className="px-2">
-                                                <div className="text-right">
-                                                    <div className="text-base font-semibold">${item?.amount}</div>
-                                                    {/* <div className="font-normal text-gray-500">{item?.external_url}</div> */}
-                                                </div> 
-                                            </td>
-                                            <td className="px-2">
-                                                <div className="text-right">
-                                                    <div className="text-base font-semibold">{item?.status}</div>
-                                                </div> 
-                                            </td>
+                        <TablePaginatedWrapper data={billingData} isFetching={isFetching} setPage={setPage}
+                                               itemsPerPage={pagination?.limit} pagination={pagination}>
+                            {({data}) => (
+                                <>
+                                    <table className="py-2 w-full text-sm">
+                                        <thead className="py-2 text-sm text-slate-500 text-left">
+                                        <tr>
+                                            <th scope="col" className="px-2 py-2">
+                                                Added
+                                            </th>
+                                            <th scope="col" className="px-2">
+                                                Member ID
+                                            </th>
+                                            <th scope="col" className="px-2">
+                                                File Name
+                                            </th>
+
+                                            <th scope="col" className="px-2 text-right">
+                                                Group
+                                            </th>
+                                            <th scope="col" className="px-2 text-right">
+                                                Status
+                                            </th>
                                         </tr>
-                                    ))
-                                    :
-                                    <tr className="py-2 border-t border-dashed border-slate-300">
-                                        <td className="px-3 py-2" colSpan={4}>
-                                            <div className="flex justify-center items-center">
-                                                No Record Found
-                                            </div>
-                                        </td>
-                                    </tr>
-                                    }
-                                </tbody>
-                            </table>
-                        </>
-                    )}
-                    </TablePaginatedWrapper>
-                </>
+                                        </thead>
+                                        <tbody>
+                                        {(data && data.length > 0) ? data?.map((item, index) => {
+                                                    const file_url = (media_server + "/" + item?.file_group + "/" + item?.file_uid + "/" + item.filename).toLowerCase();
+                                                    return (
+                                                        <tr key={index}
+                                                            className="py-2 border-t border-dashed border-slate-300">
+                                                            <td className="px-2 py-2">
+                                                                <div
+                                                                    className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
+                                                                    <div className="text-left">
+                                                                        <div
+                                                                            className="text-base font-semibold">{getDateTimeFromDateString(item?.added)}</div>
+                                                                    </div>
+                                                                </div>
+                                                            </td>
+                                                            <td className="px-2">
+                                                                <div className="text-left">
+                                                                    <div
+                                                                        className="text-base font-semibold">{item?.member_id}</div>
+                                                                </div>
+                                                            </td>
+                                                            <td className="px-2">
+                                                                <div className="text-left">
+                                                                    <div
+                                                                        className="text-base font-semibold">
+                                                                        <a href={`${file_url}`} target='_blank'
+                                                                           rel="noreferrer">
+                                                                            {item?.filename}
+                                                                        </a>
+                                                                    </div>
+                                                                </div>
+                                                            </td>
+
+                                                            <td className="px-2">
+                                                                <div className="text-right">
+                                                                    <div
+                                                                        className="text-base font-semibold">{item?.file_group}</div>
+                                                                </div>
+                                                            </td>
+                                                            <td className="px-2">
+                                                                <div className="text-right">
+                                                                    <div
+                                                                        className="text-base font-semibold">{item?.status}</div>
+                                                                </div>
+                                                            </td>
+                                                        </tr>
+                                                    )
+                                                }
+                                            )
+                                            :
+                                            <tr className="py-2 border-t border-dashed border-slate-300">
+                                                <td className="px-3 py-2" colSpan={4}>
+                                                    <div className="flex justify-center items-center">
+                                                        No Record Found
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                        }
+                                        </tbody>
+                                    </table>
+                                </>
+                            )
+                            }
+                        </TablePaginatedWrapper>
+                    </>
                 }
             </div>
         </div>
diff --git a/src/services/siteServices.js b/src/services/siteServices.js
index d590fcd..785a7d1 100644
--- a/src/services/siteServices.js
+++ b/src/services/siteServices.js
@@ -88,6 +88,12 @@ export const getBillings = (reqData) => {
     return getAuxEnd(`/billings`, postData)
 }
 
+// FUNCTION TO GET FILES
+export const getFilesUpload = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/file-uploads`, postData)
+}
+
 // FUNCTION TO GET SUBSCRIPTIONS
 export const getSubscriptions = (reqData) => {
     const postData = { ...reqData }