Index: jobvista-frontend/src/views/applications/Applications.css
===================================================================
--- jobvista-frontend/src/views/applications/Applications.css	(revision 28b3398dcd7f9cfd044c2cb7923434b06037fee2)
+++ jobvista-frontend/src/views/applications/Applications.css	(revision 28b3398dcd7f9cfd044c2cb7923434b06037fee2)
@@ -0,0 +1,130 @@
+.applications-container {
+    width: 65% !important;
+    max-width: 1500px !important;
+    margin: auto;
+}
+
+.application-title {
+    font-family: Ubuntu;
+    text-transform: uppercase;
+    margin: 25px auto;
+    display: flex;
+    justify-content: center;
+}
+.application-title h1 {
+    font-weight: bold;
+}
+
+/*.application-title span {*/
+/*    font-weight: bold;*/
+/*    */
+/*}*/
+
+.application-card {
+    font-family: Poppins;
+     border: 1px solid lightgray;
+    border-radius: 8px;
+    background-color: white;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transform: translate(0, 0);
+    height: auto;
+    padding: 20px 20px;
+    display: flex;
+    justify-content: center;
+    margin: 15px 0;
+}
+
+.application-card .left-box {
+    width: 55%;
+    display: inline-block;
+}
+
+.application-card .left-box .jobAd-title {
+    font-weight: 600;
+    /*text-transform: uppercase;*/
+    font-family: 'Segoe UI', sans-serif;
+    font-size: 22px;
+}
+
+.application-card .left-box .contact-info {
+    display: inline-flex;
+    gap: 10px;
+}
+.application-card .left-box .contact-info .contact-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.application-card .right-box {
+    width: 45%;
+    display: inline-flex;
+    justify-content: end;
+    align-items: center;
+    gap: 10px;
+}
+
+.application-card .right-box .select {
+    width: 35%;
+    display: inline-block;
+}
+
+.application-button {
+    border: 0;
+    border-radius: 8px;
+    width: auto;
+    background-color: rgba(207, 235, 255, 1);
+    color: black;
+    font-weight: bold;
+    padding: 5px 10px;
+    transition: 0.2s;
+}
+.application-button:hover {
+    background-color: rgb(187, 215, 235);
+}
+
+/*.application-card:hover {*/
+/*    transform: translate(0, 8px);*/
+/*    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);*/
+/*}*/
+
+.multi-button button{
+    /*font-size: 5vmin;*/
+    padding: .5em 1em;
+    background: #fff;
+    color: #4A5568;
+    border: 0px solid #A0AEC0;
+    //margin: .1em;
+    transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
+    box-shadow: 0 0 0 #BEE3F8;
+    transform: translateY(0);
+}
+.multi-button button:first-of-type{
+    border-radius: .5em 0 0 .5em;
+}
+.multi-button button:last-of-type{
+    border-radius: 0 .5em .5em 0;
+}
+.multi-button button i{
+    color: #A0AEC0;
+    margin-right: .3em;
+    transition: all .2s ease-out;
+}
+.multi-button:hover button{
+    color: #A0AEC0;
+}
+
+.multi-button:hover button:hover{
+    background: #D53F8C;
+    color: #fff;
+    box-shadow: 0 0 0.8em 0 rgba(213, 63, 140, .8);
+    transform: translateY(-.2em);
+}
+.multi-button:hover button i{
+    color: #CBD5E0;
+}
+.multi-button:hover button:hover i{
+    color: #FED7E2;
+    transform: rotate(-10deg);
+}
Index: jobvista-frontend/src/views/applications/ApplicationsByJobAd.js
===================================================================
--- jobvista-frontend/src/views/applications/ApplicationsByJobAd.js	(revision 28b3398dcd7f9cfd044c2cb7923434b06037fee2)
+++ jobvista-frontend/src/views/applications/ApplicationsByJobAd.js	(revision 28b3398dcd7f9cfd044c2cb7923434b06037fee2)
@@ -0,0 +1,87 @@
+import {useDispatch} from "react-redux";
+import {useEffect, useState} from "react";
+import {useParams} from "react-router";
+import {ApplicationActions} from "../../redux/actions/applicationActions";
+import {ViewApplicationDetails} from "./ViewApplicationDetails";
+import "./Applications.css"
+import Select from "react-select";
+
+export const ApplicationsByJobAd = () => {
+
+    const dispatch = useDispatch();
+    let {advertisement_id} = useParams();
+    const [applicationsByJobAd, setApplicationsByJobAd] = useState([]);
+    const [jobAdTitle, setJobAdTitle] = useState("");
+
+    useEffect(() => {
+        dispatch(ApplicationActions.fetchApplicationsByJobAdId(advertisement_id, (success, reponse) => {
+            if (success && reponse.data.length > 0) {
+                setApplicationsByJobAd(reponse.data)
+                setJobAdTitle(reponse.data[0].jobAdTitle)
+            }
+        }))
+    }, [])
+
+    const options = [
+        {value: 'PROPOSED', label: <span><i className="fa-solid fa-paper-plane"></i> Proposed</span>},
+        {value: 'UNDER_REVIEW', label: <span><i className="fa-solid fa-file-pen"></i> Under Review</span>},
+        {value: 'ACCEPTED', label: <span><i className="fa-solid fa-user-check"></i> Accepted</span>},
+        {value: 'DENIED', label: <span><i className="fa-solid fa-user-slash"></i> Denied</span>}
+    ];
+
+    let handleDefaultStatus = (status) => {
+        return options.find(option => option.value === status);
+    }
+
+    let handleChangeStatus = (selectedOption, id) => {
+        dispatch(ApplicationActions.updateApplicationStatus(id, selectedOption.value, (success, response) => {
+            if(success) {
+                console.log("Status updated.")
+            }
+        }))
+    }
+
+
+    return (<div className="applications-container">
+        <div className="application-title">
+            {jobAdTitle ?
+                <h1>Applications for <span>{jobAdTitle}</span></h1> :
+                <h1></h1>
+            }
+
+        </div>
+
+        {applicationsByJobAd && applicationsByJobAd.map((application, index) => (
+            <div className="application-card">
+                <div className="left-box">
+                    <span>Submitted on <b>{new Date(application.submittedOn).toLocaleString('default', {
+                        day: 'numeric',
+                        month: 'long',
+                        year: 'numeric'
+                    })}</b></span>
+                    <br/><br/>
+                    <div className="contact-info">
+                        <div className="contact-item">
+                            <i className="fa-solid fa-user"></i> <span>{application.jobSeekerName}</span>
+                        </div>
+                        <div className="contact-item">
+                            <i className="fa-solid fa-envelope"></i> <span>{application.jobSeekerEmail}</span>
+                        </div>
+                        <div className="contact-item">
+                            <i className="fa-solid fa-phone"></i> <span>{application.jobSeekerPhoneNumber}</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="right-box">
+                    <ViewApplicationDetails application={application}/>
+                    <div className="select">
+                        <Select options={options}  onChange={(selectedOption) => handleChangeStatus(selectedOption, application.id)} defaultValue={handleDefaultStatus(application.status)}/>
+                    </div>
+
+                </div>
+            </div>
+       ))}
+
+    </div>)
+}
Index: jobvista-frontend/src/views/applications/ApplicationsByJobSeeker.js
===================================================================
--- jobvista-frontend/src/views/applications/ApplicationsByJobSeeker.js	(revision 28b3398dcd7f9cfd044c2cb7923434b06037fee2)
+++ jobvista-frontend/src/views/applications/ApplicationsByJobSeeker.js	(revision 28b3398dcd7f9cfd044c2cb7923434b06037fee2)
@@ -0,0 +1,82 @@
+import {useDispatch, useSelector} from "react-redux";
+import {useEffect, useState} from "react";
+import {ApplicationActions} from "../../redux/actions/applicationActions";
+import {ViewApplicationDetails} from "./ViewApplicationDetails";
+import Select from "react-select";
+
+export const ApplicationsByJobSeeker = () => {
+    const dispatch = useDispatch();
+    const [applicationsByJobSeeker, setApplicationsByJobSeeker] = useState([]);
+    let applicationsByJobSeekerState = useSelector(state => state.appl.applicationsByJobSeeker);
+    const [dispatched, setDispatched] = useState(false);
+
+    useEffect(() => {
+        if(!dispatched && applicationsByJobSeekerState.length === 0) {
+            dispatch(ApplicationActions.fetchApplicationsByJobSeeker((success, response) => {
+                if(success && response.data.length > 0) {
+                    setApplicationsByJobSeeker(response.data);
+                }
+                console.log("Fetch applications by job seeker GET")
+            }))
+            setDispatched(true)
+        } else {
+            setApplicationsByJobSeeker(applicationsByJobSeekerState);
+            console.log("Fetch applications by job seeker STATE")
+        }
+    }, [applicationsByJobSeekerState])
+
+    const options = [
+        {value: 'PROPOSED', label: <span><i className="fa-solid fa-paper-plane"></i> Proposed</span>},
+        {value: 'UNDER_REVIEW', label: <span><i className="fa-solid fa-file-pen"></i> Under Review</span>},
+        {value: 'ACCEPTED', label: <span><i className="fa-solid fa-user-check"></i> Accepted</span>},
+        {value: 'DENIED', label: <span><i className="fa-solid fa-user-slash"></i> Denied</span>}
+    ];
+
+    let handleDefaultValue = (status) => {
+        return options.find(option => option.value === status);
+    }
+
+
+
+    return (
+        <div className="applications-container">
+            <div className="application-title">
+
+            </div>
+            {applicationsByJobSeeker && applicationsByJobSeeker.map((application, index) => (
+                <div key={index} className="application-card">
+                    <div className="left-box">
+                        <span className="jobAd-title">{application.jobAdTitle}</span>
+                        <br/>
+                        <br/>
+                        <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>
+
+                    <div className="right-box">
+                        <ViewApplicationDetails application={application}/>
+                        <div className="select">
+                            <Select isDisabled={true} options={options} defaultValue={handleDefaultValue(application.status)}/>
+                        </div>
+
+                    </div>
+                </div>
+            ))}
+
+        </div>
+    )
+}
Index: jobvista-frontend/src/views/applications/ApplyToJobAdModal.js
===================================================================
--- jobvista-frontend/src/views/applications/ApplyToJobAdModal.js	(revision 28b3398dcd7f9cfd044c2cb7923434b06037fee2)
+++ jobvista-frontend/src/views/applications/ApplyToJobAdModal.js	(revision 28b3398dcd7f9cfd044c2cb7923434b06037fee2)
@@ -0,0 +1,125 @@
+import React, {useState} from "react";
+import "../job_advertisements/Form.css";
+
+import 'react-responsive-modal/styles.css';
+import {Modal} from 'react-responsive-modal';
+import Select from "react-select";
+
+//Validation
+import * as yup from "yup";
+import {yupResolver} from "@hookform/resolvers/yup";
+import {Controller, useForm} from "react-hook-form";
+
+
+import {employmentStatusOptions, industryOptions, jobTypeOptions} from "../selectOptions";
+import {useDispatch, useSelector} from "react-redux";
+import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
+import Roles from "../../enumerations/Roles";
+import {ApplicationActions} from "../../redux/actions/applicationActions";
+
+
+export const ApplyToJobAdModal = (props) => {
+    const {jobAd, role} = props
+    const [modal, setModal] = useState(false);
+    const dispatch = useDispatch();
+    const auth = useSelector(state => state.auth.currentUser)
+
+    const [resumeFile, setResumeFile] = useState(null);
+    const toggleModal = () => {
+        setModal(!modal);
+    };
+
+    const schema = yup.object().shape({
+        answerOne: yup.string().required("Please answer the question"),
+        answerTwo: yup.string().required("Please answer the question"),
+        answerThree: yup.string().required("Please answer the question"),
+        messageToRecruiter: yup.string(),
+    })
+
+    const {register, handleSubmit, control, formState: {errors}} = useForm({
+        resolver: yupResolver(schema),
+    });
+
+    const submitApplication = async (values) => {
+        try {
+            const formData = new FormData();
+            formData.append('jobSeekerId', auth.id);
+            formData.append('jobAdId', jobAd.id);
+            formData.append('resumeFile', resumeFile);
+            formData.append('answerOne', values.answerOne);
+            formData.append('answerTwo', values.answerTwo);
+            formData.append('answerThree', values.answerThree);
+            formData.append('messageToRecruiter', values.messageToRecruiter);
+
+            dispatch(ApplicationActions.submitApplication(
+                formData,(success, response) => {
+                    if(success) {
+                        console.log("Job Advertisement added")
+                        toggleModal()
+                    }
+                }
+            ))
+        } catch (err) {
+            console.error(err)
+        }
+    }
+    let minimumDate = new Date();
+    minimumDate.setDate(minimumDate.getDate() + 1);
+
+    return (<div className="modal-wrap">
+        {role===Roles.JOBSEEKER &&
+            <>
+                {jobAd.active && <button onClick={toggleModal} className="card-button apply">Apply now</button> }
+                {!jobAd.active && <button className="card-button apply disabled">Apply now</button> }
+            </>
+        }
+        <Modal open={modal} onClose={toggleModal} center >
+            <div className="head-modal">
+                <h3>Applying to {jobAd.title} at {jobAd.recruiterName}</h3>
+                <i className="fa-solid fa-x btn-close-modal" onClick={toggleModal}></i>
+            </div>
+
+            <div className="modal-content" >
+                <form onSubmit={handleSubmit(submitApplication)}>
+                    <div className="row">
+                        <div className="col-md-6">
+                            <label className="label">Why are you interested in joining our company?</label>
+                            <textarea type="text" placeholder="Write your answer here..."
+                                      {...register("answerOne")} className="applictaion-textarea"/>
+                            <p style={{color: "red"}}>{errors.answerOne?.message}</p>
+
+                            <label className="label">What makes you a good fit for this position?</label>
+                            <textarea type="text" placeholder="Write your answer here..."
+                                      {...register("answerTwo")} className="applictaion-textarea"/>
+                            <p style={{color: "red"}}>{errors.answerTwo?.message}</p>
+
+                            <label className="label">What do you hope to achieve in your first 6 months in this role?</label>
+                            <textarea type="text"  placeholder="Write your answer here..."
+                                   {...register("answerThree")} className="applictaion-textarea"/>
+                            <p style={{color: "red"}}>{errors.answerThree?.message}</p>
+
+                        </div>
+                        <div className="col-md-6">
+                            <label htmlFor="start">Curriculum vitae (CV)</label>
+                            <br/>
+                            <input {...register("file")} onChange={(e) => setResumeFile(e.target.files[0])} required type="file" id="fileUpload" accept=".pdf"/>
+
+                            <br/>
+                            <label className="label">Message to the recruiter</label>
+                            <textarea type="text" placeholder="Optional..."
+                                      {...register("messageToRecruiter")} className="applictaion-textarea"/>
+
+                            <br/><br/>
+                            <p style={{color: "red"}}>Please note that your personal data from your account will be used to identify and process your application.</p>
+                        </div>
+                    </div>
+
+                    <div className="aligned">
+                        <button className="submit-btn"> Submit</button>
+                    </div>
+
+                </form>
+            </div>
+        </Modal>
+    </div>)
+}
Index: jobvista-frontend/src/views/applications/ViewApplicationDetails.js
===================================================================
--- jobvista-frontend/src/views/applications/ViewApplicationDetails.js	(revision 28b3398dcd7f9cfd044c2cb7923434b06037fee2)
+++ jobvista-frontend/src/views/applications/ViewApplicationDetails.js	(revision 28b3398dcd7f9cfd044c2cb7923434b06037fee2)
@@ -0,0 +1,84 @@
+import React, {useEffect, useState} from "react";
+import "../job_advertisements/Form.css";
+
+import 'react-responsive-modal/styles.css';
+import {Modal} from 'react-responsive-modal';
+import Select from "react-select";
+
+//Validation
+import * as yup from "yup";
+import {yupResolver} from "@hookform/resolvers/yup";
+import {Controller, useForm} from "react-hook-form";
+
+
+import {employmentStatusOptions, industryOptions, jobTypeOptions} from "../selectOptions";
+import {useDispatch, useSelector} from "react-redux";
+import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
+import Roles from "../../enumerations/Roles";
+import {ApplicationActions} from "../../redux/actions/applicationActions";
+
+
+export const ViewApplicationDetails = (props) => {
+    const {application} = props
+    const [modal, setModal] = useState(false);
+    const dispatch = useDispatch();
+    const auth = useSelector(state => state.auth.currentUser)
+    const [resumeUrl, setResumeUrl] = useState("");
+
+    //const [resumeFile, setResumeFile] = useState(null);
+    const toggleModal = () => {
+        setModal(!modal);
+    };
+
+    useEffect(() => {
+        if(application) {
+            dispatch(ApplicationActions.downloadResume(application.fileName, (success, response) => {
+                if(success) {
+                    setResumeUrl(response);
+                }
+            }))
+        }
+    }, [application])
+
+    return (<div className="modal-wrap">
+        <button onClick={toggleModal} className="application-button">View application</button>
+        <Modal open={modal} onClose={toggleModal} center >
+            <div className="head-modal">
+                <h3>{application.jobSeekerName}'s application for {application.jobAdTitle}</h3>
+                <i className="fa-solid fa-x btn-close-modal" onClick={toggleModal}></i>
+            </div>
+
+            <div className="modal-content" >
+                <form>
+                    <div className="row">
+                        <div className="col-md-6">
+                            <label className="label">Why are you interested in joining our company?</label>
+                            <textarea disabled type="text" defaultValue={application.questionAnswers[0]} disabled placeholder="Write your answer here..." className="applictaion-textarea"/>
+
+
+                            <label className="label">What makes you a good fit for this position?</label>
+                            <textarea disabled type="text" defaultValue={application.questionAnswers[1]}  placeholder="Write your answer here..." className="applictaion-textarea"/>
+
+
+                            <label className="label">What do you hope to achieve in your first 6 months in this role?</label>
+                            <textarea disabled type="text" defaultValue={application.questionAnswers[2]}  placeholder="Write your answer here..." className="applictaion-textarea"/>
+
+                        </div>
+                        <div className="col-md-6">
+                            <label htmlFor="start">Curriculum vitae (CV)</label>
+                            <br/>
+                            <a className="resume-link" href={resumeUrl} target="_blank" rel="noopener noreferrer">{application.fileName}</a>
+                            <br/>
+
+                            <br/>
+                            <label className="label">Message to the recruiter</label>
+                            <textarea disabled type="text" defaultValue={application.message} placeholder="Optional..." className="applictaion-textarea"/>
+
+                        </div>
+                    </div>
+
+                </form>
+            </div>
+        </Modal>
+    </div>)
+}
Index: jobvista-frontend/src/views/dashboard/Dashboard.css
===================================================================
--- jobvista-frontend/src/views/dashboard/Dashboard.css	(revision 19398adb44637736271a04ab58b1f528cc33908f)
+++ jobvista-frontend/src/views/dashboard/Dashboard.css	(revision 28b3398dcd7f9cfd044c2cb7923434b06037fee2)
@@ -11,7 +11,8 @@
 }
 
-
-.head-dashboard-box .head-component {
-    display: inline;
+.head-dashboard-box .filter-container {
+    display: inline-flex;
+    justify-content: center;
+    gap: 10px;
 }
 
@@ -19,5 +20,6 @@
 .head-dashboard-box .search-container {
     position: relative;
-    float: left;
+    /*float: left;*/
+    display: inline-block;
 }
 .head-dashboard-box .search-container .search-input {
@@ -26,12 +28,12 @@
     padding: 5px 30px;
     border-radius: 10px;
-    margin-right: 15px;
+    /*margin-right: 15px;*/
 }
 
-.search-container .search-input:focus {
+.head-dashboard-box .search-container .search-input:focus {
     outline-color: #6367ef;
 }
 
-.search-container i {
+.head-dashboard-box .search-container i {
     left: 10px;
     position: absolute;
@@ -39,8 +41,8 @@
 }
 
-.item {
-    width: 35%;
+.head-dashboard-box .item {
+    width: 20%;
     display: inline-block;
-    margin-left: 10px;
-    float: right;
+    /*margin-left: 10px;*/
+    /*float: left !important;*/
 }
Index: jobvista-frontend/src/views/dashboard/Dashboard.js
===================================================================
--- jobvista-frontend/src/views/dashboard/Dashboard.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
+++ jobvista-frontend/src/views/dashboard/Dashboard.js	(revision 28b3398dcd7f9cfd044c2cb7923434b06037fee2)
@@ -20,6 +20,6 @@
 
     const [role, setRole] = useState("");
-    const [sortOrder, setSortOrder] = useState("newest");
-    const [selectedDateRange, setSelectedDateRange] = useState("all");
+    const [selectedSortOrder, setSelectedSortOrder] = useState("date_newest");
+    const [selectedIndustry, setSelectedIndustry] = useState("all");
     const [searchTerm, setSearchTerm] = useState("");
     const [dispatched, setDispatched] = useState(false)
@@ -32,5 +32,5 @@
 
     useEffect(() => {
-        if(!dispatched && jobAdvertisementsState.length == 0) {
+        if (!dispatched && jobAdvertisementsState.length == 0) {
             dispatch(JobAdvertisementActions.fetchJobAdvertisements((success, response) => {
                 if (success && response.data.length > 0) {
@@ -39,5 +39,4 @@
                 setDispatched(true)
                 console.log("Fetch all job advertisements GET")
-                console.log(response.data)
             }))
 
@@ -46,6 +45,19 @@
             console.log("Fetch all job advertisements STATE")
         }
-    }, [])
+    }, [jobAdvertisementsState])
 
+    let filterJobAdvertisements = () => {
+        JobAdvertisementActions.filterJobAdvertisements(
+            {
+                searchTerm: searchTerm,
+                industry: selectedIndustry,
+                sortOrder: selectedSortOrder
+            }, (success, response) => {
+                if (success) {
+                    setJobAdvertisements(response.data);
+                }
+            }
+        )
+    }
 
     return (
@@ -53,22 +65,20 @@
             <div className="head-dashboard-box">
                 <div className="row">
-                    <div className="col-md-3">
-                        <div className="search-container head-component">
-                            <i className="fa-solid fa-magnifying-glass blue-colored"></i>
+                    <div className="col-md-12 filter-container">
+                        <div className="search-container">
+                            <i className="fa-solid fa-magnifying-glass search-icon"></i>
                             <input
                                 className="search-input"
                                 type="text"
                                 placeholder="Search job advertisement by title..."
-                                //value={searchTerm}
-                                //onChange={event => setSearchTerm(event.target.value)}
+                                value={searchTerm}
+                                onChange={event => setSearchTerm(event.target.value)}
                             />
                         </div>
-                    </div>
-                    <div className="col-md-9">
                         <div className="sort-section item">
                             <Select
                                 defaultValue={{value: "all", label: "All industries"}}
-                                //value={sortOrder.value}
-                                //onChange ={option => setSortOrder(option.value)}
+                                value={selectedIndustry.value}
+                                onChange={option => setSelectedIndustry(option.value)}
                                 options={industryOptionsFilter}
                                 className="sort-range sort"
@@ -78,20 +88,24 @@
                             <Select
                                 defaultValue={{value: "newest", label: "Date (Newest First)"}}
-                                //value={sortOrder.value}
-                                //onChange ={option => setSortOrder(option.value)}
-                                options = {sortOptions}
+                                value={selectedSortOrder.value}
+                                onChange={option => setSelectedSortOrder(option.value)}
+                                options={sortOptions}
                                 className="sort-range sort"
                             />
                         </div>
-                        <div className="date-range-section item">
-                            <Select
-                                defaultValue={{value: "all", label: "Lifetime"}}
-                                //value={selectedDateRange.value}
-                                //onChange={option => setSelectedDateRange(option.value)}
-                                options={dataRangeOptions}
-                                className="date-range sort"
-                            />
-                        </div>
+                        <button onClick={filterJobAdvertisements} className="btn-open-modal">Find jobs</button>
                     </div>
+                    {/*<div className="col-md-3">*/}
+
+                    {/*<div className="date-range-section item">*/}
+                    {/*    <Select*/}
+                    {/*        defaultValue={{value: "all", label: "Lifetime"}}*/}
+                    {/*        //value={selectedDateRange.value}*/}
+                    {/*        //onChange={option => setSelectedDateRange(option.value)}*/}
+                    {/*        options={dataRangeOptions}*/}
+                    {/*        className="date-range sort"*/}
+                    {/*    />*/}
+                    {/*</div>*/}
+                    {/*</div>*/}
                 </div>
             </div>
@@ -104,22 +118,25 @@
                                 <div className="card-head">
                                     <span className="hourly-salary"><b>${jobAd.startingSalary}/hr</b></span>
-                                    <span className="job-type"> {jobAd.jobType===JobType.JOB ? "Job" : "Internship"}</span>
+                                    <span
+                                        className="job-type"> {jobAd.jobType === JobType.JOB ? "Job" : "Internship"}</span>
                                     {!jobAd.active && <span className="expired">Expired</span>}
                                 </div>
                                 <div className="card-body">
                                     <h5 className="card-title">{jobAd.title}</h5>
-                                    <span>{jobAd.industry} • <span style={{color: "black", fontWeight: "bold"}}>{formatRelativeTime(jobAd.postedOn)}</span></span>
+                                    <span>{jobAd.industry} • <span style={{
+                                        color: "black",
+                                        fontWeight: "bold"
+                                    }}>{formatRelativeTime(jobAd.postedOn)}</span></span>
                                     <div className="card-info">
-                                        <span><i className="fa-solid fa-building" style={{color: "#000000"}}></i> Company: <span style={{color: "black", fontWeight: "bold"}}>{jobAd.recruiterName}</span></span> <br/>
+                                        <span><i className="fa-solid fa-building"
+                                                 style={{color: "#000000"}}></i> Company: <span style={{
+                                            color: "black",
+                                            fontWeight: "bold"
+                                        }}>{jobAd.recruiterName}</span></span> <br/>
                                     </div>
 
                                     <div className="aligned">
-                                        <Link to={`/job-advertisements/view/${jobAd.id}`} className="card-button">Read more</Link>
-                                        {role===Roles.JOBSEEKER &&
-                                            <>
-                                                {jobAd.active && <button className="card-button">Apply now</button> }
-                                                {!jobAd.active && <button className="card-button disabled">Apply now</button> }
-                                            </>
-                                        }
+                                        <Link to={`/job-advertisements/${jobAd.id}`} className="card-button">Read
+                                            more</Link>
                                     </div>
 
Index: jobvista-frontend/src/views/job_advertisements/AddJobAdModal.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/AddJobAdModal.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
+++ jobvista-frontend/src/views/job_advertisements/AddJobAdModal.js	(revision 28b3398dcd7f9cfd044c2cb7923434b06037fee2)
@@ -1,4 +1,6 @@
 import React, {useState} from "react";
 import "./Form.css";
+
+import { Editor } from 'primereact/editor';
 
 import 'react-responsive-modal/styles.css';
@@ -19,4 +21,5 @@
 export const AddJobAdModal = () => {
     const [modal, setModal] = useState(false);
+    const [text, setText] = useState("");
     const dispatch = useDispatch();
     const auth = useSelector(state => state.auth.currentUser)
@@ -52,5 +55,5 @@
                     employmentStatus: values.employmentStatus.value,
                 }, (success, response) => {
-                    if(success) {
+                    if (success) {
                         console.log("Job Advertisement added")
                         toggleModal()
@@ -66,80 +69,99 @@
 
     return (<div className="modal-wrap">
-            <button onClick={toggleModal} className="btn-open-modal">POST ADVERTISEMENT</button>
-            <Modal open={modal} onClose={toggleModal} center classNames="job-advertisement-modal">
-                <div className="head-modal">
-                    <h3>Post Job Advertisement</h3>
-                    <i className="fa-solid fa-x btn-close-modal" onClick={toggleModal}></i>
-                </div>
+        <div className="col">
+            <button onClick={toggleModal} className="add-new-card">
+                <h3>+ Post Advertisement</h3>
+            </button>
+        </div>
+        {/*<button onClick={toggleModal} className="btn-open-modal">POST ADVERTISEMENT</button>*/}
+        <Modal open={modal} onClose={toggleModal} center classNames="job-advertisement-modal">
+            <div className="head-modal">
+                <h3>Post Job Advertisement</h3>
+                <i className="fa-solid fa-x btn-close-modal" onClick={toggleModal}></i>
+            </div>
 
-                <div className="modal-content">
-                    <form onSubmit={handleSubmit(addJobAdvertisement)}>
-                        <div className="row">
-                            <div className="col-md-7">
+            <div className="modal-content">
+                <form onSubmit={handleSubmit(addJobAdvertisement)}>
+                    <div className="row">
+                        <div className="col-md-7">
 
-                                <label className="label">Job title:</label>
-                                <input type="text" {...register("title")}/>
-                                <p style={{color: "red"}}>{errors.title?.message}</p>
+                            <label className="label">Job title:</label>
+                            <input type="text" {...register("title")}/>
+                            <p style={{color: "red"}}>{errors.title?.message}</p>
 
-                                <label className="label">Job description:</label>
-                                <textarea type="text" placeholder="Describe the job position and all the requirements"
-                                          className="description-textarea" {...register("description")}/>
-                                <p style={{color: "red"}}>{errors.description?.message}</p>
-                            </div>
-
-                            <div className="col-md-5">
-                                <label className="label">Hourly rate:</label>
-                                <input {...register("startingSalary")}/>
-                                <p style={{color: "red"}}>{errors.startingSalary?.message}</p>
-
-                                <label className="label">Industry:</label>
-                                <Controller
-                                    name="industry"
-                                    control={control}
-                                    render={({ field })  => (<Select
-                                            {...field}
-                                            options={industryOptions}
-                                        />)}
-                                />
-                                <p style={{color: "red"}}>{errors.industry?.message}</p>
-
-                                <label className="label">Job type:</label>
-                                <Controller
-                                    name="jobType"
-                                    control={control}
-                                    render={({ field }) => (<Select
-                                            {...field}
-                                            options={jobTypeOptions}
-                                        />)}
-                                />
-                                <p style={{color: "red"}}>{errors.jobType?.message}</p>
-
-                                <label className="label">Employment status</label>
-                                <Controller
-                                    name="employmentStatus"
-                                    control={control}
-                                    render={({ field }) => (<Select
-                                            {...field}
-                                            options={employmentStatusOptions}
-                                        />)}
-                                />
-                                <p style={{color: "red"}}>{errors.employmentStatus?.message}</p>
-
-                                <label htmlFor="start">Active until:</label>
-                                <input type="date" defaultValue={minimumDate.toLocaleDateString('en-CA')}
-                                       min={minimumDate.toLocaleDateString('en-CA')} onChange={(event) => console.log(event.target.value)}
-                                       {...register("date")}/>
+                            <label className="label">Job description:</label>
+                            {/*<textarea type="text" placeholder="Describe the job position and all the requirements"*/}
+                            {/*          className="description-textarea" {...register("description")}/>*/}
 
 
-                            </div>
+                            <Controller
+                                name="description"
+                                control={control}
+                                render={({ field }) => (
+                                    <Editor
+                                        value={field.value}
+                                        onTextChange={(e) => field.onChange(e.htmlValue)}
+                                        style={{ height: '300px', fontSize: "16px", fontFamily: "Segoe UI" }}
+                                    />
+                                )}
+                            />
+                            <p style={{color: "red"}}>{errors.description?.message}</p>
                         </div>
 
-                        <div className="aligned">
-                            <button className="submit-btn"> Submit</button>
+                        <div className="col-md-5">
+                            <label className="label">Hourly rate:</label>
+                            <input {...register("startingSalary")}/>
+                            <p style={{color: "red"}}>{errors.startingSalary?.message}</p>
+
+                            <label className="label">Industry:</label>
+                            <Controller
+                                name="industry"
+                                control={control}
+                                render={({field}) => (<Select
+                                    {...field}
+                                    options={industryOptions}
+                                />)}
+                            />
+                            <p style={{color: "red"}}>{errors.industry?.message}</p>
+
+                            <label className="label">Job type:</label>
+                            <Controller
+                                name="jobType"
+                                control={control}
+                                render={({field}) => (<Select
+                                    {...field}
+                                    options={jobTypeOptions}
+                                />)}
+                            />
+                            <p style={{color: "red"}}>{errors.jobType?.message}</p>
+
+                            <label className="label">Employment status</label>
+                            <Controller
+                                name="employmentStatus"
+                                control={control}
+                                render={({field}) => (<Select
+                                    {...field}
+                                    options={employmentStatusOptions}
+                                />)}
+                            />
+                            <p style={{color: "red"}}>{errors.employmentStatus?.message}</p>
+
+                            <label htmlFor="start">Active until:</label>
+                            <input type="date" defaultValue={minimumDate.toLocaleDateString('en-CA')}
+                                   min={minimumDate.toLocaleDateString('en-CA')}
+                                   onChange={(event) => console.log(event.target.value)}
+                                   {...register("date")}/>
+
+
                         </div>
+                    </div>
 
-                    </form>
-                </div>
-            </Modal>
-        </div>)
+                    <div className="aligned">
+                        <button className="submit-btn"> Submit</button>
+                    </div>
+
+                </form>
+            </div>
+        </Modal>
+    </div>)
 }
Index: jobvista-frontend/src/views/job_advertisements/EditJobAdModal.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/EditJobAdModal.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
+++ jobvista-frontend/src/views/job_advertisements/EditJobAdModal.js	(revision 28b3398dcd7f9cfd044c2cb7923434b06037fee2)
@@ -15,4 +15,5 @@
 import {useDispatch, useSelector} from "react-redux";
 import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
+import {Editor} from "primereact/editor";
 
 
@@ -85,6 +86,20 @@
 
                             <label className="label">Job description:</label>
-                            <textarea type="text" defaultValue={jobAd.props.description} placeholder="Describe the job position and all the requirements"
-                                      className="description-textarea" {...register("description")}/>
+                            {/*<textarea type="text" defaultValue={jobAd.props.description} placeholder="Describe the job position and all the requirements"*/}
+                            {/*          className="description-textarea" {...register("description")}/>*/}
+
+                            <Controller
+                                name="description"
+                                control={control}
+                                render={({ field }) => (
+                                    <Editor
+                                        defaultValue={jobAd.props.description}
+                                        value={jobAd.props.description}
+                                        onTextChange={(e) => field.onChange(e.htmlValue)}
+                                        style={{ height: '300px', fontSize: "16px", fontFamily: "Segoe UI" }}
+                                    />
+                                )}
+                            />
+
                             <p style={{color: "red"}}>{errors.description?.message}</p>
                         </div>
Index: jobvista-frontend/src/views/job_advertisements/Form.css
===================================================================
--- jobvista-frontend/src/views/job_advertisements/Form.css	(revision 19398adb44637736271a04ab58b1f528cc33908f)
+++ jobvista-frontend/src/views/job_advertisements/Form.css	(revision 28b3398dcd7f9cfd044c2cb7923434b06037fee2)
@@ -12,5 +12,5 @@
     font-weight: 600;
     float: right;
-    margin-left: 10px;
+    /*margin-left: 10px;*/
 }
 
@@ -87,5 +87,19 @@
 .description-textarea {
     height: 285px;
+}
 
+.applictaion-textarea {
+    height: 100px;
+}
+
+.resume-link {
+    display: block;
+    padding: 5px 10px;
+    width: 100%;
+    border-radius: 3px;
+    border: 1px solid lightgrey;
+}
+.custom {
+    margin-top: 10px;
 }
 
@@ -161,6 +175,16 @@
 }
 
+.ql-snow .ql-picker.ql-font {
+    display: none;
+}
+.ql-toolbar.ql-snow .ql-picker-options {
+    background-color: white;
+}
+.ql-snow .ql-tooltip {
+    transform: translateX(100px) !important;
+}
 
 
 
 
+
Index: jobvista-frontend/src/views/job_advertisements/JobAdDetails.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/JobAdDetails.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
+++ jobvista-frontend/src/views/job_advertisements/JobAdDetails.js	(revision 28b3398dcd7f9cfd044c2cb7923434b06037fee2)
@@ -9,4 +9,5 @@
 import {formatRelativeTime} from "../../utils/utils";
 import {AddJobAdModal} from "./AddJobAdModal";
+import {ApplyToJobAdModal} from "../applications/ApplyToJobAdModal";
 
 
@@ -52,5 +53,5 @@
 
                     <p><i className="fa-solid fa-money-check-dollar"></i> <span>Hourly rate: ${jobAd.startingSalary}</span></p>
-                    <p><i className="fa-solid fa-briefcase"></i> Employment status: {jobAd.employmentStatus===EmploymentStatus.FULL_TIME ? "Full-time" : "Part-time"}</p>
+                    <p><i className="fa-solid fa-briefcase"></i> Employment status: {jobAd.employmentStatus==="FULL_TIME" ? "Full-time" : "Part-time"}</p>
                     <p><i className="fa-solid fa-calendar-days"></i> Active until: {new Date(jobAd.activeUntil).toLocaleString('default', { day: 'numeric', month: 'long',  year: 'numeric' })}</p>
 
@@ -59,12 +60,5 @@
                         <p dangerouslySetInnerHTML={{ __html: jobAd.description.replace(/\n/g, "<br>") }}></p>
                     )}
-
-
-                    {role===Roles.JOBSEEKER &&
-                        <>
-                            {jobAd.active && <button className="card-button apply">Apply now</button> }
-                            {!jobAd.active && <button className="card-button apply disabled">Apply now</button> }
-                        </>
-                    }
+                    <ApplyToJobAdModal jobAd={jobAd} role={role}/>
 
                 </div>
@@ -76,9 +70,9 @@
                     {/*TO DO - AFTER IMPLEMENTING FORM FOR UPDATING PERSONAL INFO*/}
                     <h4>About the company</h4>
-                    <p>As a pioneering Swiss software company, we provide innovative IT products and tailored digital solutions. We bring decades of experience in designing, developing, and implementing highly scalable, secure, and user-centric software.
+                    <p>
+                        For over two decades, we have been harnessing technology to drive meaningful change.  Working side by side with leading brands, we build strategies, products and solutions tailored to unique needs –regardless of industry, region or scale. By combining world-class engineering, industry expertise and a people-centric mindset, we consult and partner with our customers to create technological solutions that drive innovation and transform businesses.
                         <br/><br/>
-                        Working across the banking, payment, mobility, health, and publishing industries, we are experts at delivering seamless and secure user journeys within these privacy-driven environments. Our business-critical applications are designed to overcome complexity and drive growth.
-                        <br/><br/>
-                        We are based in Zurich, Switzerland, and have offices elsewhere in Europe, Asia, and the Middle East. Founded in 1996, we are a business of 800 experts, enabling our clients to create value with trusted software..
+                        From ideation to production, we support our customers with bespoke solutions across various industries, including payments, insurance, finance and banking, technology, media and entertainment, telecommunications, retail and consumer goods, supply chain and logistics, healthcare and life sciences, energy and resources, government, automotive and travel.
+
                     </p>
                     <p><span><i className="fa-solid fa-envelope"></i> {recruiterDetails.email}</span> • <span>
Index: jobvista-frontend/src/views/job_advertisements/JobAdvertisements.css
===================================================================
--- jobvista-frontend/src/views/job_advertisements/JobAdvertisements.css	(revision 19398adb44637736271a04ab58b1f528cc33908f)
+++ jobvista-frontend/src/views/job_advertisements/JobAdvertisements.css	(revision 28b3398dcd7f9cfd044c2cb7923434b06037fee2)
@@ -1,45 +1,0 @@
-.head-job-advertisements-box {
-    height: 10%;
-    width: 100%;
-    background-color: #fff;
-    border-radius: 12px;
-    padding: 15px 20px;
-    margin-bottom: 20px;
-    margin-top: 30px;
-    height: auto;
-}
-
-
-.head-job-advertisements-box .head-component {
-    display: inline;
-}
-
-
-.head-job-advertisements-box .search-container {
-    position: relative;
-    float: left;
-}
-.head-job-advertisements-box .search-container .search-input {
-    width: 400px;
-    display: inline;
-    padding: 5px 30px;
-    border-radius: 10px;
-    margin-right: 15px;
-}
-
-.search-container .search-input:focus {
-    outline-color: #6367ef;
-}
-
-.search-container i {
-    left: 10px;
-    position: absolute;
-    top: 10px;
-}
-
-.item {
-    width: 25%;
-    display: inline-block;
-    margin-left: 10px;
-    float: right;
-}
Index: jobvista-frontend/src/views/job_advertisements/JobAdvertisements.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/JobAdvertisements.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
+++ jobvista-frontend/src/views/job_advertisements/JobAdvertisements.js	(revision 28b3398dcd7f9cfd044c2cb7923434b06037fee2)
@@ -6,5 +6,5 @@
 import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
 import {formatRelativeTime, sortElementsByDateCreated} from "../../utils/utils";
-import {dataRangeOptions, industryOptions, sortOptions} from "../selectOptions";
+import {dataRangeOptions, industryOptions, industryOptionsFilter, sortOptions} from "../selectOptions";
 import Select from "react-select";
 import {DeleteJobAdModal} from "./DeleteJobAdModal";
@@ -13,5 +13,5 @@
 import JobType from "../../enumerations/JobType";
 
-export const JobAdvertisements = () => {
+export const JobAdvertisements = (props) => {
 
     const dispatch = useDispatch();
@@ -21,6 +21,6 @@
 
     const [role, setRole] = useState("");
-    const [sortOrder, setSortOrder] = useState("newest");
-    const [selectedDateRange, setSelectedDateRange] = useState("all");
+    const [selectedSortOrder, setSelectedSortOrder] = useState("date_newest");
+    const [selectedIndustry, setSelectedIndustry] = useState("all");
     const [searchTerm, setSearchTerm] = useState("");
     const [dispatched, setDispatched] = useState(false)
@@ -35,5 +35,5 @@
     useEffect(() => {
         if (!dispatched && jobAdvertisementsByRecruiterState.length === 0) {
-            dispatch(JobAdvertisementActions.fetchJobAdvertisementsByRecruiter("deleteThis", (success, response) => {
+            dispatch(JobAdvertisementActions.fetchJobAdvertisementsByRecruiter((success, response) => {
                 if (success && response.data.length > 0) {
                     setJobAdvertisementsByRecruiter(sortElementsByDateCreated(response.data))
@@ -49,45 +49,57 @@
     }, [jobAdvertisementsByRecruiterState])
 
+    let filterJobAdvertisements = () => {
+        JobAdvertisementActions.filterJobAdvertisementsByRecruiter(
+            {
+                searchTerm: searchTerm,
+                industry: selectedIndustry,
+                sortOrder: selectedSortOrder
+            }, (success, response) => {
+                if (success) {
+                    setJobAdvertisementsByRecruiter(response.data);
+                }
+            }
+        )
+    }
+
     return (
         <div className="container">
-            <div className="head-job-advertisements-box">
+            <div className="head-dashboard-box">
                 <div className="row">
-                    <div className="col-md-3">
-                        <div className="search-container head-component">
-                            <i className="fa-solid fa-magnifying-glass blue-colored"></i>
+                    <div className="col-md-12 filter-container">
+                        <div className="search-container">
+                            <i className="fa-solid fa-magnifying-glass search-icon"></i>
                             <input
                                 className="search-input"
                                 type="text"
                                 placeholder="Search job advertisement by title..."
-                                //value={searchTerm}
-                                //onChange={event => setSearchTerm(event.target.value)}
+                                value={searchTerm}
+                                onChange={event => setSearchTerm(event.target.value)}
                             />
                         </div>
-                    </div>
-                    <div className="col-md-9">
-
-                        <AddJobAdModal/>
+                        <div className="sort-section item">
+                            <Select
+                                defaultValue={{value: "all", label: "All industries"}}
+                                value={selectedIndustry.value}
+                                onChange={option => setSelectedIndustry(option.value)}
+                                options={industryOptionsFilter}
+                                className="sort-range sort"
+                            />
+                        </div>
                         <div className="sort-section item">
                             <Select
                                 defaultValue={{value: "newest", label: "Date (Newest First)"}}
-                                //value={sortOrder.value}
-                                //onChange ={option => setSortOrder(option.value)}
+                                value={selectedSortOrder.value}
+                                onChange={option => setSelectedSortOrder(option.value)}
                                 options={sortOptions}
                                 className="sort-range sort"
                             />
                         </div>
-                        <div className="date-range-section item">
-                            <Select
-                                defaultValue={{value: "all", label: "Lifetime"}}
-                                //value={selectedDateRange.value}
-                                //onChange={option => setSelectedDateRange(option.value)}
-                                options={dataRangeOptions}
-                                className="date-range sort"
-                            />
-                        </div>
+                        <button onClick={filterJobAdvertisements} className="btn-open-modal">Find jobs</button>
                     </div>
                 </div>
             </div>
             <div className="row row-cols-1 row-cols-md-4 g-4">
+                <AddJobAdModal/>
 
                 {jobAdvertisementsByRecruiter &&
@@ -97,5 +109,6 @@
                                 <div className="card-head">
                                     <span className="hourly-salary"><b>${jobAd.startingSalary}/hr</b></span>
-                                    <span className="job-type"> {jobAd.jobType===JobType.JOB ? "Job" : "Internship"}</span>
+                                    <span
+                                        className="job-type"> {jobAd.jobType === JobType.JOB ? "Job" : "Internship"}</span>
                                     {!jobAd.active && <span className="expired">Expired</span>}
                                     <div className="card-management-btns">
@@ -106,11 +119,19 @@
                                 <div className="card-body">
                                     <h5 className="card-title">{jobAd.title}</h5>
-                                    <span>{jobAd.industry} • <span style={{color: "black", fontWeight: "bold"}}>{formatRelativeTime(jobAd.postedOn)}</span></span>
+                                    <span>{jobAd.industry} • <span style={{
+                                        color: "black",
+                                        fontWeight: "bold"
+                                    }}>{formatRelativeTime(jobAd.postedOn)}</span></span>
                                     <div className="card-info">
-                                        <span><i className="fa-solid fa-building" style={{color: "#000000"}}></i> Company: <span style={{color: "black", fontWeight: "bold"}}>{jobAd.recruiterName}</span></span> <br/>
+                                        <span><i className="fa-solid fa-building"
+                                                 style={{color: "#000000"}}></i> Company: <span style={{
+                                            color: "black",
+                                            fontWeight: "bold"
+                                        }}>{jobAd.recruiterName}</span></span> <br/>
                                     </div>
 
                                     <div className="aligned">
-                                        <Link to={`/my-job-advertisements/view/${jobAd.id}`} className="card-button solo">View applications</Link>
+                                        <Link to={`/my-job-advertisements/${jobAd.id}/applications`}
+                                              className="card-button solo">View applications</Link>
                                     </div>
 
Index: jobvista-frontend/src/views/selectOptions.js
===================================================================
--- jobvista-frontend/src/views/selectOptions.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
+++ jobvista-frontend/src/views/selectOptions.js	(revision 28b3398dcd7f9cfd044c2cb7923434b06037fee2)
@@ -58,7 +58,7 @@
 
 export const sortOptions = [
-    { value: "newest", label: "Date (Newest First)" },
-    { value: "oldest", label: "Date (Oldest First)" },
-    { value: "highest", label: "Salary (High to Low)" },
-    { value: "lowest", label: "Salary (Low to High)" },
+    { value: "date_newest", label: "Date (Newest First)" },
+    { value: "date_oldest", label: "Date (Oldest First)" },
+    { value: "salary_highest", label: "Salary (High to Low)" },
+    { value: "salary_lowest", label: "Salary (Low to High)" },
 ]
Index: jobvista-frontend/src/views/static/Header.css
===================================================================
--- jobvista-frontend/src/views/static/Header.css	(revision 19398adb44637736271a04ab58b1f528cc33908f)
+++ jobvista-frontend/src/views/static/Header.css	(revision 28b3398dcd7f9cfd044c2cb7923434b06037fee2)
@@ -20,4 +20,5 @@
     height: 80px;
     background-color: #535C91;
+    font-family: Poppins, sans-serif;
 }
 
Index: jobvista-frontend/src/views/static/Header.js
===================================================================
--- jobvista-frontend/src/views/static/Header.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
+++ jobvista-frontend/src/views/static/Header.js	(revision 28b3398dcd7f9cfd044c2cb7923434b06037fee2)
@@ -38,6 +38,6 @@
                         {role==Roles.JOBSEEKER &&
                             <>
-                                <NavLink to="/applications" className="nav-item nav-link" >Applications</NavLink>
-                                <NavLink to="/favoritejobs" className="nav-item nav-link" >Saved</NavLink>
+                                <NavLink to="/my-applications" className="nav-item nav-link" >My Applications</NavLink>
+                                {/*<NavLink to="/favoritejobs" className="nav-item nav-link" >Saved</NavLink>*/}
                             </>
 
@@ -45,10 +45,10 @@
                         {role==Roles.RECRUITER &&
                             <>
-                                <NavLink to="/my-job-advertisements" className="nav-item nav-link" >Job Advertisements</NavLink>
-                                <NavLink to="/favoritejobs" className="nav-item nav-link" >Saved</NavLink>
+                                <NavLink to="/my-job-advertisements" className="nav-item nav-link" >My Advertisements</NavLink>
+                                {/*<NavLink to="/favoritejobs" className="nav-item nav-link" >Saved</NavLink>*/}
                             </>
                         }
                         <NavLink to="/about" className="nav-item nav-link">About</NavLink>
-                        <NavLink to="/contact" className="nav-item nav-link">Contact</NavLink>
+                        <NavLink to="/contact" className="nav-item nav-link">Support</NavLink>
                     </ul>
 
