Index: jobvista-frontend/src/views/applications/ApplicationsByJobSeeker.js
===================================================================
--- jobvista-frontend/src/views/applications/ApplicationsByJobSeeker.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
+++ jobvista-frontend/src/views/applications/ApplicationsByJobSeeker.js	(revision 4d97b633e131eca76d6c290321725684fc1d5970)
@@ -22,9 +22,8 @@
 
 
-
     useEffect(() => {
-        if(!dispatched && (applicationsByJobSeekerState.length === 0 || applicationsByJobSeekerState.length === 1) ) {
+        if (!dispatched && (applicationsByJobSeekerState.length === 0 || applicationsByJobSeekerState.length === 1)) {
             dispatch(ApplicationActions.fetchApplicationsByJobSeeker(auth.id, (success, response) => {
-                if(success && response.data.length > 0) {
+                if (success && response.data.length > 0) {
                     setApplicationsByJobSeeker(sortElementsBy(response.data, "submittedOn"));
                 }
@@ -41,7 +40,7 @@
     useEffect(() => {
 
-        if(dispatched && !logoDispatched) {
+        if (dispatched && !logoDispatched) {
             applicationsByJobSeeker.forEach(jobAd => {
-                if(jobAd.recruiterId && !logos[jobAd.recruiterId]) {
+                if (jobAd.recruiterId && !logos[jobAd.recruiterId]) {
                     fetchLogo(jobAd.recruiterId);
                 }
@@ -49,5 +48,5 @@
             setLogoDispatched(true)
             console.log("Fetch all logos GET")
-        } else if (logoDispatched){
+        } else if (logoDispatched) {
             setLogos(logosState)
             console.log("Fetch all logos STATE")
@@ -58,8 +57,7 @@
 
 
-
     const fetchLogo = (recruiterId) => {
         dispatch(RecruiterActions.downloadLogo(recruiterId, (success, response) => {
-            if(success) {
+            if (success) {
                 setLogos(prevLogos => ({...prevLogos, [recruiterId]: response}))
             }
@@ -67,10 +65,35 @@
     };
 
-    const options = [
-        {value: 'PROPOSED', label: <span className="status" style={{backgroundColor: '#4A90E2'}}><i className="fa-solid fa-paper-plane"></i> Proposed</span>},
-        {value: 'UNDER_REVIEW', label: <span className="status" style={{backgroundColor: '#F5A623'}}><i className="fa-solid fa-file-pen"></i> Under Review</span>},
-        {value: 'ACCEPTED', label: <span className="status" style={{backgroundColor: '#7ED321'}}><i className="fa-solid fa-user-check"></i> Accepted</span>},
-        {value: 'DENIED', label: <span className="status" style={{backgroundColor: '#D0021B'}}><i className="fa-solid fa-user-slash"></i> Denied</span>}
+    const options = [{
+        value: 'PROPOSED', label: <span className="status" style={{backgroundColor: '#4A90E2'}}><i
+            className="fa-solid fa-paper-plane"></i> Proposed</span>
+    }, {
+        value: 'UNDER_REVIEW', label: <span className="status" style={{backgroundColor: '#F5A623'}}><i
+            className="fa-solid fa-file-pen"></i> Under Review</span>
+    }, {
+        value: 'ACCEPTED', label: <span className="status" style={{backgroundColor: '#7ED321'}}><i
+            className="fa-solid fa-user-check"></i> Accepted</span>
+    }, {
+        value: 'DENIED', label: <span className="status" style={{backgroundColor: '#D0021B'}}><i
+            className="fa-solid fa-user-slash"></i> Denied</span>
+    }];
+
+    const [selectedFilter, setSelectedFilter] = useState('All');
+
+    const filters = [
+        { value: 'ALL', label: 'All', icon: 'fa-folder-open' },
+        { value: 'PROPOSED', label: 'Proposed', icon: 'fa-paper-plane' },
+        { value: 'UNDER_REVIEW', label: 'Under Review', icon: 'fa-file-pen' },
+        { value: 'ACCEPTED', label: 'Accepted', icon: 'fa-user-check' },
+        { value: 'DENIED', label: 'Denied', icon: 'fa-user-slash' },
     ];
+
+    const filterApplicationsByJobSeeker= (filter) => {
+        dispatch(ApplicationActions.filterApplicationsByJobSeeker(auth.id, filter, (success, response) => {
+            if(success) {
+                //notify
+            }
+        }))
+    }
 
     let handleDefaultValue = (status) => {
@@ -79,55 +102,77 @@
 
 
-
-    return (
-        <div className="custom-container">
+    return (<div className="custom-container">
 
             <div className="application-title">
                 <h3>Application history</h3>
             </div>
+
+        <div className="application-filters d-inline-flex flex-row justify-content-start">
+            {
+                filters.map(filter => (
+                    <span
+                        key={filter.label}
+                        className={selectedFilter === filter.label ? "selected" : ""}
+                        onClick={() => {
+                            setSelectedFilter(filter.label)
+                            filterApplicationsByJobSeeker(filter.value)
+                        }}
+                    ><i className={`fa-solid ${filter.icon}`}></i> {filter.label}</span>
+                ))
+            }
+        </div>
+
             {applicationsByJobSeeker && applicationsByJobSeeker.map((application, index) => (
-                <div key={index} className="application-card">
-                    <div className="app-company-logo">
-                        <img
-                            // loading gif
-                            src={logosState[application.recruiterId]}
-                            alt=""
-                            width={75} height={75}
-                        />
-                    </div>
+                <div className="application-card-wrapper">
+                    <div key={index} className="application-card">
+                        <div className="app-company-logo">
+                            <img
+                                // loading gif
+                                src={logosState[application.recruiterId]}
+                                alt=""
+                                width={75} height={75}
+                            />
+                        </div>
 
-                    <div className="app-info">
-                        <Link to={`/job-advertisements/${application.jobAdId}`} className="jobAd-title">{application.jobAdTitle}</Link>
-                        {/*<h5 className="jobAd-title"></h5>*/}
-                        <div className="contact-info">
-                            <div className="contact-item">
-                                <i className="fa-solid fa-building"></i> <span>{application.recruiterName}</span>
+                        <div className="app-info">
+                            <Link to={`/job-advertisements/${application.jobAdId}`}
+                                  className="jobAd-title">{application.jobAdTitle}</Link>
+                            {/*<h5 className="jobAd-title"></h5>*/}
+                            <div className="contact-info">
+                                <div className="contact-item">
+                                    <i className="fa-solid fa-building"></i> <span>{application.recruiterName}</span>
+                                </div>
+                                <div className="contact-item">
+                                    <i className="fa-solid fa-envelope"></i> <span>{application.recruiterEmail}</span>
+                                </div>
+                                <div className="contact-item">
+                                    <i className="fa-solid fa-phone"></i>
+                                    <span>{application.recruiterPhoneNumber}</span>
+                                </div>
+                                <span> • Submitted on <b>{new Date(application.submittedOn).toLocaleString('default', {
+                                    day: 'numeric', month: 'long', year: 'numeric'
+                                })}</b></span>
                             </div>
-                            <div className="contact-item">
-                                <i className="fa-solid fa-envelope"></i> <span>{application.recruiterEmail}</span>
-                            </div>
-                            <div className="contact-item">
-                                <i className="fa-solid fa-phone"></i> <span>{application.recruiterPhoneNumber}</span>
-                            </div>
-                            <span> • Submitted on <b>{new Date(application.submittedOn).toLocaleString('default', {
-                                day: 'numeric',
-                                month: 'long',
-                                year: 'numeric'
-                            })}</b></span>
+                        </div>
+
+                        <div className="app-status">
+                            <ApplicationDetailsModal application={application}/>
+                            <> {handleDefaultValue(application.status).label}</>
+                            {/*<div className="select">*/}
+                            {/*    <Select isDisabled={true} options={options} />*/}
+                            {/*</div>*/}
+
                         </div>
                     </div>
+                    {application.response &&
+                        <div className="response-message">
+                            {application.response}
+                        </div>
+                    }
 
-                    <div className="app-status">
-                        <ApplicationDetailsModal application={application}/>
-                        <> {handleDefaultValue(application.status).label}</>
-                        {/*<div className="select">*/}
-                        {/*    <Select isDisabled={true} options={options} />*/}
-                        {/*</div>*/}
+                </div>
 
-                    </div>
-                </div>
             ))}
 
-        </div>
-    )
+        </div>)
 }
