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>)
+}
