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>
 
