Index: jobvista-frontend/src/views/job_advertisements/AddJobAdModal.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/AddJobAdModal.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/views/job_advertisements/AddJobAdModal.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -1,4 +1,4 @@
 import React, {useState} from "react";
-import "./Form.css";
+import "../shared_css/Modal.css";
 
 import { Editor } from 'primereact/editor';
@@ -17,4 +17,5 @@
 import {useDispatch, useSelector} from "react-redux";
 import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
+import {notifyJobAdPost} from "../../utils/toastUtils";
 
 
@@ -32,5 +33,5 @@
         description: yup.string().required("Please enter a description"),
         industry: yup.mixed().required("Select industry"),
-        startingSalary: yup.number().required("Please enter the starting salary"),
+        startingSalary: yup.string().required("Please enter the starting salary"),
         jobType: yup.mixed().required("Select job type"),
         employmentStatus: yup.mixed().required("Select employment status"),
@@ -46,5 +47,5 @@
             dispatch(JobAdvertisementActions.addJobAdvertisement(
                 {
-                    email: auth.email,
+                    id: auth.id,
                     title: values.title,
                     description: values.description,
@@ -56,6 +57,7 @@
                 }, (success, response) => {
                     if (success) {
-                        console.log("Job Advertisement added")
+                        // console.log("Job Advertisement added")
                         toggleModal()
+                        notifyJobAdPost()
                     }
                 }
@@ -75,5 +77,5 @@
         </div>
         {/*<button onClick={toggleModal} className="btn-open-modal">POST ADVERTISEMENT</button>*/}
-        <Modal open={modal} onClose={toggleModal} center classNames="job-advertisement-modal">
+        <Modal open={modal} onClose={toggleModal} center>
             <div className="head-modal">
                 <h3>Post Job Advertisement</h3>
@@ -82,5 +84,5 @@
 
             <div className="modal-content">
-                <form onSubmit={handleSubmit(addJobAdvertisement)}>
+                <form>
                     <div className="row">
                         <div className="col-md-7">
@@ -111,5 +113,5 @@
                         <div className="col-md-5">
                             <label className="label">Hourly rate:</label>
-                            <input {...register("startingSalary")}/>
+                            <input type="number" {...register("startingSalary")}/>
                             <p style={{color: "red"}}>{errors.startingSalary?.message}</p>
 
@@ -157,6 +159,7 @@
                     </div>
 
-                    <div className="aligned">
-                        <button className="submit-btn"> Submit</button>
+                    <div className="modal-buttons">
+                        <div className="cancel-btn" onClick={toggleModal}> Cancel</div>
+                        <button className="submit-btn" onClick={handleSubmit(addJobAdvertisement)}>Submit</button>
                     </div>
 
Index: jobvista-frontend/src/views/job_advertisements/DeleteJobAdModal.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/DeleteJobAdModal.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/views/job_advertisements/DeleteJobAdModal.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -1,4 +1,4 @@
 import React, {useState} from "react";
-import "./Form.css";
+import "../shared_css/Modal.css";
 
 import 'react-responsive-modal/styles.css';
@@ -15,4 +15,5 @@
 import {useDispatch, useSelector} from "react-redux";
 import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
+import {notifyJobAdDelete} from "../../utils/toastUtils";
 
 
@@ -29,6 +30,7 @@
             dispatch(JobAdvertisementActions.deleteJobAdvertisement(jobAd.props.id, (success, response) => {
                 if (success) {
-                    console.log("Job Advertisement deleted")
+                    // console.log("Job Advertisement deleted")
                     toggleModal()
+                    notifyJobAdDelete()
                 }
             }))
Index: jobvista-frontend/src/views/job_advertisements/EditJobAdModal.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/EditJobAdModal.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/views/job_advertisements/EditJobAdModal.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -1,4 +1,4 @@
 import React, {useEffect, useState} from "react";
-import "./Form.css";
+import "../shared_css/Modal.css";
 
 import 'react-responsive-modal/styles.css';
@@ -16,4 +16,5 @@
 import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
 import {Editor} from "primereact/editor";
+import {notifyJobAdDelete, notifyJobAdEdit} from "../../utils/toastUtils";
 
 
@@ -23,5 +24,8 @@
     const auth = useSelector(state => state.auth.currentUser)
     const toggleModal = () => {
+        console.log("NAD SET")
         setModal(!modal);
+        console.log("POD SET")
+
     };
 
@@ -52,6 +56,7 @@
                 }, jobAd.props.id, (success, response) => {
                     if(success) {
-                        console.log("Job Advertisement edited")
+                        // console.log("Job Advertisement edited")
                         toggleModal()
+                        notifyJobAdEdit()
                     }
                 }
@@ -78,5 +83,5 @@
 
             <div className="modal-content">
-                <form onSubmit={handleSubmit(editJobAdvertisement)}>
+                <form>
                     <div className="row">
                         <div className="col-md-7">
@@ -92,7 +97,8 @@
                                 name="description"
                                 control={control}
+                                defaultValue={jobAd.props.description}
                                 render={({ field }) => (
                                     <Editor
-                                        defaultValue={jobAd.props.description}
+                                        // defaultValue={jobAd.props.description}
                                         value={jobAd.props.description}
                                         onTextChange={(e) => field.onChange(e.htmlValue)}
@@ -107,5 +113,5 @@
                         <div className="col-md-5">
                             <label className="label">Hourly rate:</label>
-                            <input defaultValue={jobAd.props.startingSalary} {...register("startingSalary")}/>
+                            <input type="number" defaultValue={jobAd.props.startingSalary} {...register("startingSalary")}/>
                             <p style={{color: "red"}}>{errors.startingSalary?.message}</p>
 
@@ -166,8 +172,8 @@
                     </div>
 
-                    <div className="aligned">
-                        <button className="submit-btn"> Submit</button>
+                    <div className="modal-buttons">
+                        <div className="cancel-btn" onClick={toggleModal}> Cancel</div>
+                        <button className="submit-btn" onClick={handleSubmit(editJobAdvertisement)}> Save changes</button>
                     </div>
-
                 </form>
             </div>
Index: jobvista-frontend/src/views/job_advertisements/Form.css
===================================================================
--- jobvista-frontend/src/views/job_advertisements/Form.css	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ 	(revision )
@@ -1,190 +1,0 @@
-
-.modal-wrap {
-    display: inline;
-}
-.btn-open-modal {
-    font-size: 18px;
-    border-radius: 10px;
-    padding: 5px 10px;
-    background-color: #06367a;
-    border: none;
-    color: #fff;
-    font-weight: 600;
-    float: right;
-    /*margin-left: 10px;*/
-}
-
-.btn-close-modal {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-    padding: 5px 7px;
-    cursor: pointer;
-}
-
-.react-responsive-modal-modal {
-    background: #f1f1f1;
-    border-radius: 10px;
-    width: 1300px !important;
-    //min-width: 300px;
-    height: auto;
-    padding: 0 !important;
-    overflow-y: hidden;
-}
-
-.react-responsive-modal-closeButton {
-   display: none !important;
-}
-
-.react-responsive-modal-modal .head-modal {
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    background-color: rgba(1,38,90,0.9);
-    background-size: cover;
-    padding: 14px 48px;
-    color: white;
-}
-
-.react-responsive-modal-modal .head-modal h3 {
-    text-transform: uppercase;
-    font-weight: bold;
-    display: inline;
-}
-
-
-.react-responsive-modal-modal .modal-content {
-    /*line-height: 1.4;*/
-    padding: 30px 48px;
-    /*height: 100%;*/
-    border: 0;
-}
-
-.react-responsive-modal-modal .modal-content form .aligned {
-    text-align: center;
-}
-
-
-.react-responsive-modal-modal .modal-content form .label {
-    display: block;
-}
-
-input {
-    display: block;
-    padding: 5px 10px;
-    width: 100%;
-    border-radius: 3px;
-    border: 1px solid lightgrey;
-}
-
-textarea {
-    width: 100%;
-    resize: none;
-    border-radius: 3px;
-    border: 1px solid lightgrey;
-    padding: 5px 10px;
-}
-
-.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;
-}
-
-input:focus, textarea:focus {
-    outline-color: cornflowerblue;
-}
-
-.submit-btn {
-    position: relative;
-    padding: 5px 20px;
-    border-radius: 5px;
-    border: none;
-    color: white;
-    text-transform: uppercase;
-    font-weight: bold;
-    width: 30%;
-    /*clip-path: polygon(100% 0, 100% 75%, 95% 100%, 0 100%, 0 0);*/
-    background: linear-gradient(to right, #06367a, #06367a);
-    margin-top: 15px;
-}
-
-.category-option {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-/* DELETE MODAL */
-
-.modal-delete-buttons {
-    display: flex;
-    justify-content: flex-end;
-    gap: 10px;
-    margin-top: 25px;
-}
-
-.modal-delete-content {
-    padding: 20px 25px;
-}
-
-.modal-delete-content-inside {
-    display: flex;
-    align-items: center;
-}
-
-.modal-delete-text {
-    padding-left: 35px;
-
-}
-
-.modal-delete-text p {
-    margin: 0;
-}
-
-
-.cancel-btn, .delete-btn {
-    display: inline;
-    border: none;
-    padding: 5px 25px 5px 25px;
-    border-radius: 7px;
-}
-
-.delete-btn {
-    background-color: red;
-    color: white;
-}
-
-.x-icon {
-    transform: scale(3.3) !important;
-    color: #D93936 !important;
-    padding: 0 15px !important;
-    /*margin-top: 20px !important;*/
-}
-
-.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.css
===================================================================
--- jobvista-frontend/src/views/job_advertisements/JobAdDetails.css	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/views/job_advertisements/JobAdDetails.css	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -10,7 +10,26 @@
 .details-wrap {
     width: 100%;
-    //height: auto;
-    height: 80vh;
+    height: auto;
+    max-height: 80vh;
     overflow-y: auto;
+    background-color: #fff;
+    border-radius: 12px;
+    padding: 15px 20px;
+    margin-bottom: 20px;
+
+    /*scrollbar-width: thin; !* "auto" hides scrollbar on some browsers, "thin" shows a thin scrollbar *!*/
+    /*scrollbar-color: #999999 #fff;*/
+}
+
+.details-wrap .span-about {
+    color: darkgray;
+}
+
+
+
+.details-wrap-profile {
+    width: 100%;
+    height: auto;
+
     background-color: #fff;
     border-radius: 12px;
@@ -56,4 +75,25 @@
 }
 
+.apply-button {
+    border: 0;
+    border-radius: 8px;
+    width: 45%;
+    background-image: linear-gradient(to right, #a1c4fd 0%, aliceblue 61%, #a1c4fd 100%);
+    background-size: 200% auto;
+    font-weight: bold;
+    padding: 5px 10px;
+    transition: 0.4s;
+}
+
+.apply-button:not(.disabled):hover{
+    background-color: rgb(187, 215, 235);
+    color: black;
+}
+
+.disabled {
+    cursor: default !important;
+    opacity: 0.6;
+}
+
 .apply:not(.expired) {
     width: 20% !important;
@@ -65,2 +105,8 @@
     background-position: right center;
 }
+
+.recruiter-link {
+    color: black;
+    font-size: 30px;
+    text-decoration:none;
+}
Index: jobvista-frontend/src/views/job_advertisements/JobAdDetails.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/JobAdDetails.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/views/job_advertisements/JobAdDetails.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -10,4 +10,6 @@
 import {AddJobAdModal} from "./AddJobAdModal";
 import {ApplyToJobAdModal} from "../applications/ApplyToJobAdModal";
+import {Link} from "react-router-dom";
+import {RecruiterActions} from "../../redux/actions/recruiterActions";
 
 
@@ -20,7 +22,28 @@
     const auth = useSelector(state => state.auth.currentUser);
 
+    let logosState = useSelector(state => state.images.logos)
+    const [logoDispatched, setLogoDispatched] = useState(false)
+    const [logoView, setLogoView] = useState(null);
+
     useEffect(() => {
         setRole(auth.role)
     }, [auth])
+
+    useEffect(() => {
+        if (jobAd) {
+            if (!logoDispatched && !logosState[jobAd.recruiterId]) {
+                dispatch(RecruiterActions.downloadLogo(jobAd.recruiterId, (success, response) => {
+                    if (success) {
+                        setLogoView(response)
+                        setLogoDispatched(true)
+                    }
+                }))
+            } else {
+                setLogoView(logosState[jobAd.recruiterId])
+            }
+
+        }
+
+    }, [jobAd])
 
 
@@ -41,18 +64,36 @@
             <div className="col-md-9">
                 <div className="details-wrap">
+                    <div className="row">
+                        <div className="col-md-9">
+                            <div className="title">
+                                <h2>{jobAd.title} </h2>
+                                <span className="job-type"> {jobAd.jobType===JobType.JOB ? "Job" : "Internship"}</span>
+                                {!jobAd.active && <span className="expired">Expired</span>}
+                            </div>
 
-                    <div className="title">
-                        <h2>{jobAd.title} </h2>
-                        <span className="job-type"> {jobAd.jobType===JobType.JOB ? "Job" : "Internship"}</span>
-                        {!jobAd.active && <span className="expired">Expired</span>}
+                            <p className="details-head-info">
+                                <span><b>{jobAd.recruiterName}</b></span> • <span>{jobAd.industry}</span> • <span>{formatRelativeTime(jobAd.postedOn)}</span>
+                            </p>
+
+                            <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==="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>
+
+                        </div>
+                        <div className="col-md-3">
+                            {jobAd.recruiterId &&
+                                <>
+                                    <img
+                                        // loading gif
+                                        src={logosState[jobAd.recruiterId]}
+                                        alt=""
+                                        width={200} height={200}
+                                    />
+                                </>
+                            }
+
+                        </div>
                     </div>
 
-                    <p className="details-head-info">
-                        <span><b>{jobAd.recruiterName}</b></span> • <span>{jobAd.industry}</span> • <span>{formatRelativeTime(jobAd.postedOn)}</span>
-                    </p>
-
-                    <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==="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>
 
                     <h4>About the job</h4>
@@ -66,17 +107,25 @@
             <div className="col-md-3">
                 <div className="details-wrap">
-                    <h3>{jobAd.recruiterName}</h3>
+                    <Link className="recruiter-link" to={`/recruiters/${jobAd.recruiterId}`}>{jobAd.recruiterName} </Link>
 
-                    {/*TO DO - AFTER IMPLEMENTING FORM FOR UPDATING PERSONAL INFO*/}
                     <h4>About the company</h4>
                     <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/>
-                        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.
+                        {recruiterDetails.companyDescription
+                            ? recruiterDetails.companyDescription.length > 710
+                                ? `${recruiterDetails.companyDescription.substring(0, 710)}...`
+                                : recruiterDetails.companyDescription
+                            : "There is no info about this company yet."
+                        }
+                    </p>
 
+                    <p>
+                        <i className="fa-solid fa-envelope"></i> <span className="span-about"> {recruiterDetails.contactEmail}</span> <br/>
+                        <i className="fa-solid fa-phone"></i> <span className="span-about"> {recruiterDetails.contactPhoneNumber}</span> <br/>
+                        {recruiterDetails.receptionist && <><i className="fa-solid fa-user-tie"></i> <span className="span-about"> {recruiterDetails.receptionist}</span> </>}
                     </p>
-                    <p><span><i className="fa-solid fa-envelope"></i> {recruiterDetails.email}</span> • <span>
-                <i className="fa-solid fa-phone"></i> {recruiterDetails.phoneNumber}</span>
-                    </p>
+
+                    <div className="d-flex justify-content-center mt-4">
+                        <Link className="card-button" to={`/recruiters/${jobAd.recruiterId}`}>Read more </Link>
+                    </div>
                 </div>
             </div>
Index: jobvista-frontend/src/views/job_advertisements/JobAdvertisements.css
===================================================================
--- jobvista-frontend/src/views/job_advertisements/JobAdvertisements.css	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/views/job_advertisements/JobAdvertisements.css	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -0,0 +1,126 @@
+.photo-box {
+    position: relative;
+    margin-bottom: 140px;
+}
+
+.photo-box div img {
+    background-color: rgb(243, 242, 241);
+}
+
+.company-banner {
+    width: 100%;
+    height: 300px;
+    object-fit: cover;
+    object-position: initial;
+    display: block;
+    border-radius: 10px;
+}
+
+.company-logo {
+    position: absolute;
+    border-radius: 25px;
+    border: 5px solid rgb(243, 242, 241);
+    bottom: -110px;
+    left: 70px
+}
+
+.info-tab {
+    margin: 20px 10px;
+    position: absolute;
+    left: 280px;
+    font-family: Poppins;
+}
+
+.photo-box .edit-buttons {
+    display: flex;
+    gap: 10px;
+    position: absolute;
+    right: 20px;
+    bottom: -100px;
+}
+
+.edit-buttons .exclamation {
+    display: inline;
+    position: relative;
+}
+
+.fa-circle-exclamation {
+    color: #d80e0e;
+
+}
+
+.edit-buttons .modal-wrap .react-responsive-modal-modal .head-modal {
+    background-color: white !important;
+    color: black !important;
+}
+
+.edit-buttons button {
+    background-color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 7px 13px;
+    transition: 0.1s;
+}
+
+.edit-buttons button:hover {
+    /*background-color: #F2F2F2;*/
+    background-color: lightgray;
+}
+
+.my-workspace {
+    position: relative;
+}
+
+.custom-text-area {
+    height: 14rem !important;
+}
+
+.line-separator {
+    width: 95%;
+    border-top: 1px solid gray;
+    border-radius: 5px;
+    margin: auto;
+    margin-bottom: 30px;
+}
+
+
+.confirmation-bar {
+    position: fixed;
+    //top: 80px;
+    left: 0;
+    width: calc(100% - 17px);
+    background-color: rgba(0, 0, 0, 0.5); /* Adjust background color as needed */
+    //background-color: #7D7D7A; /* Adjust background color as needed */
+    padding: 10px;
+    z-index: 11;
+
+}
+.confirmation-bar-buttons {
+    display: flex;
+    justify-content: right;
+    gap: 10px;
+    margin-right: 60px
+}
+.confirmation-bar .confirmation-bar-buttons button {
+    padding: 5px 20px;
+    border: none;
+    border-radius: 8px;
+    color: white;
+    transition: 0.1s;
+}
+.confirmation-bar .confirmation-bar-buttons .cancel-changes {
+    background-color: #8D8D8B;
+}
+
+.confirmation-bar .confirmation-bar-buttons .cancel-changes:hover {
+    background-color: #9B9A99;
+}
+
+.confirmation-bar .confirmation-bar-buttons .save-changes {
+    background-color: #0866FF;
+
+}
+.confirmation-bar .confirmation-bar-buttons .save-changes:hover {
+    background-color: dodgerblue;
+}
+
Index: jobvista-frontend/src/views/job_advertisements/JobAdvertisements.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/JobAdvertisements.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ 	(revision )
@@ -1,146 +1,0 @@
-import {AddJobAdModal} from "./AddJobAdModal";
-
-import "./JobAdvertisements.css"
-import {useDispatch, useSelector} from "react-redux";
-import {useEffect, useState} from "react";
-import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
-import {formatRelativeTime, sortElementsBy} from "../../utils/utils";
-import {dataRangeOptions, industryOptions, industryOptionsFilter, sortOptions} from "../selectOptions";
-import Select from "react-select";
-import {DeleteJobAdModal} from "./DeleteJobAdModal";
-import {EditJobAdModal} from "./EditJobAdModal";
-import {Link} from "react-router-dom";
-import JobType from "../../enumerations/JobType";
-
-export const JobAdvertisements = (props) => {
-
-    const dispatch = useDispatch();
-    const [jobAdvertisementsByRecruiter, setJobAdvertisementsByRecruiter] = useState([]);
-    const auth = useSelector(state => (state.auth.currentUser))
-    let jobAdvertisementsByRecruiterState = useSelector(state => (state.jobAd.jobAdvertisementsByRecruiter))
-
-    const [role, setRole] = useState("");
-    const [selectedSortOrder, setSelectedSortOrder] = useState("date_newest");
-    const [selectedIndustry, setSelectedIndustry] = useState("all");
-    const [searchTerm, setSearchTerm] = useState("");
-    const [dispatched, setDispatched] = useState(false)
-
-
-    useEffect(() => {
-        if (auth) {
-            setRole(auth.role);
-        }
-    }, [auth]);
-
-    useEffect(() => {
-        if (!dispatched && jobAdvertisementsByRecruiterState.length === 0) {
-            dispatch(JobAdvertisementActions.fetchJobAdvertisementsByRecruiter((success, response) => {
-                if (success && response.data.length > 0) {
-                    setJobAdvertisementsByRecruiter(sortElementsBy(response.data))
-                }
-                console.log("Fetch job advertisements by recruiter GET")
-            }))
-            setDispatched(true);
-
-        } else {
-            setJobAdvertisementsByRecruiter(jobAdvertisementsByRecruiterState)
-            console.log("Fetch job advertisements by recruiter STATE")
-        }
-    }, [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-dashboard-box">
-                <div className="row">
-                    <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)}
-                            />
-                        </div>
-                        <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={selectedSortOrder.value}
-                                onChange={option => setSelectedSortOrder(option.value)}
-                                options={sortOptions}
-                                className="sort-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 &&
-                    jobAdvertisementsByRecruiter.map((jobAd, index) => (
-                        <div key={index} className="col">
-                            <div className="custom-card">
-                                <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>
-                                    {!jobAd.active && <span className="expired">Expired</span>}
-                                    <div className="card-management-btns">
-                                        <DeleteJobAdModal props={jobAd}/>
-                                        <EditJobAdModal props={jobAd}/>
-                                    </div>
-                                </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>
-                                    <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/>
-                                    </div>
-
-                                    <div className="aligned">
-                                        <Link to={`/my-job-advertisements/${jobAd.id}/applications`}
-                                              className="card-button solo">View applications</Link>
-                                    </div>
-
-                                </div>
-                            </div>
-                        </div>
-                    ))}
-
-            </div>
-        </div>
-    )
-}
Index: jobvista-frontend/src/views/job_advertisements/RecruiterWorkspace.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/RecruiterWorkspace.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
+++ jobvista-frontend/src/views/job_advertisements/RecruiterWorkspace.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -0,0 +1,165 @@
+import {AddJobAdModal} from "./AddJobAdModal";
+
+import "./JobAdvertisements.css"
+import "../shared_css/Random.css"
+
+import {useDispatch, useSelector} from "react-redux";
+import {useEffect, useState} from "react";
+import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
+import {formatRelativeTime, sortElementsBy} from "../../utils/utils";
+import {dataRangeOptions, industryOptions, industryOptionsFilter, sortOptions} from "../selectOptions";
+import Select from "react-select";
+import {DeleteJobAdModal} from "./DeleteJobAdModal";
+import {EditJobAdModal} from "./EditJobAdModal";
+import {Link} from "react-router-dom";
+import JobType from "../../enumerations/JobType";
+import {RecruiterActions} from "../../redux/actions/recruiterActions";
+
+
+export const Workspace = (props) => {
+
+    const dispatch = useDispatch();
+    const [dispatched, setDispatched] = useState(false)
+
+    const auth = useSelector(state => (state.auth.currentUser))
+
+    const [jobAdvertisementsByRecruiter, setJobAdvertisementsByRecruiter] = useState([]);
+    let jobAdvertisementsByRecruiterState = useSelector(state => (state.jobAd.jobAdvertisementsByRecruiter))
+
+    const [recruiterDetails, setRecruiterDetails] = useState(null);
+
+    const [selectedSortOrder, setSelectedSortOrder] = useState("date_newest");
+    const [selectedIndustry, setSelectedIndustry] = useState("all");
+    const [searchTerm, setSearchTerm] = useState("");
+
+    const [activeJobListingsCount, setActiveJobListingsCount] = useState(0);
+
+    useEffect(() => {
+        if (auth) {
+            dispatch(RecruiterActions.fetchRecruiterEditDetailsById(auth.id, (success, response) => {
+                if (success) {
+                    setRecruiterDetails(response.data)
+                }
+            }))
+        }
+    }, [auth]);
+
+
+    useEffect(() => {
+        if (!dispatched && jobAdvertisementsByRecruiterState.length === 0) {
+            dispatch(JobAdvertisementActions.fetchJobAdvertisementsByRecruiter(auth.id, (success, response) => {
+                if (success && response.data.length > 0) {
+                    setJobAdvertisementsByRecruiter(sortElementsBy(response.data))
+                }
+                console.log("Fetch job advertisements by recruiter GET")
+            }))
+            setDispatched(true);
+
+        } else {
+            setJobAdvertisementsByRecruiter(jobAdvertisementsByRecruiterState)
+            console.log("Fetch job advertisements by recruiter STATE")
+
+            setActiveJobListingsCount(countActiveJobListings(jobAdvertisementsByRecruiterState));
+        }
+
+    }, [jobAdvertisementsByRecruiterState])
+
+    let filterJobAdvertisements = () => {
+        JobAdvertisementActions.filterJobAdvertisementsByRecruiter({
+            searchTerm: searchTerm, industry: selectedIndustry, sortOrder: selectedSortOrder
+        }, (success, response) => {
+            if (success) {
+                setJobAdvertisementsByRecruiter(response.data);
+            }
+        })
+    }
+
+    function countActiveJobListings(jobAds) {
+        if (jobAds.length > 0) {
+            const activeJobListings = jobAds.filter(job => job.active)
+            return activeJobListings.length;
+        }
+        return 0;
+    }
+
+    return (<div className="container">
+
+            {/*<div className="line-separator"></div>*/}
+
+            <div className="filter-container">
+                <div className="row">
+                    <div className="col-md-12 filter-box">
+                        <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)}
+                            />
+                        </div>
+                        <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={selectedSortOrder.value}
+                                onChange={option => setSelectedSortOrder(option.value)}
+                                options={sortOptions}
+                                className="sort-range sort"
+                            />
+                        </div>
+                        <button onClick={filterJobAdvertisements} className="blue-submit-button">Find jobs</button>
+                    </div>
+                </div>
+            </div>
+            <div className="row row-cols-1 row-cols-md-5 g-3">
+                <AddJobAdModal/>
+
+                {jobAdvertisementsByRecruiter && jobAdvertisementsByRecruiter.map((jobAd, index) => (
+                    <div key={index} className="col">
+                        <div className="custom-card">
+                            <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>
+                                {!jobAd.active && <span className="expired">Expired</span>}
+                                <div className="card-management-btns">
+                                    <DeleteJobAdModal props={jobAd}/>
+                                    <EditJobAdModal props={jobAd}/>
+                                </div>
+                            </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>
+                                <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/>
+                                </div>
+
+                                <div className="aligned">
+                                    <Link to={`/job-management-hub/applications/${jobAd.id}`}
+                                          className="card-button solo">View applications</Link>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>))}
+            </div>
+        </div>
+
+
+    )
+}
