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>
 
