Index: jobvista-frontend/src/App.css
===================================================================
--- jobvista-frontend/src/App.css	(revision d8b6c91094bd4c748b347d914a3c4c3745d51587)
+++ jobvista-frontend/src/App.css	(revision 19398adb44637736271a04ab58b1f528cc33908f)
@@ -5,10 +5,5 @@
   background-color: rgb(243, 242, 241);
   height: 100vh;
-}
-
-.card {
-  border: 1px solid black;
-  border-radius: 5px;
-  padding: 10px;
+  overflow-y: auto;
 }
 
@@ -35,5 +30,140 @@
 }
 
+.container {
+  width: 80% !important;
+  max-width: 1500px !important;
+}
+
 
 /*font-family: 'Ubuntu', sans-serif;*/
 /*font-family: 'Cairo', sans-serif;*/
+
+.react-responsive-modal-overlay {
+  backdrop-filter: blur(2px);
+}
+
+/*CARDS*/
+
+.col {
+  height: 280px !important;
+}
+
+.custom-card {
+  //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: 260px;
+}
+
+.custom-card:hover {
+  transform: translate(0, 8px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+.custom-card .card-head {
+  padding: 25px;
+  padding-bottom: 0 !important;
+}
+
+.custom-card .card-head .job-type {
+  font-size: 12px !important;
+  margin-left: 6px !important;
+  position: relative;
+  bottom: 3px;
+}
+
+.custom-card .card-head .expired {
+  font-size: 12px !important;
+  margin-left: 8px !important;
+  position: relative;
+  bottom: 3px;
+}
+
+.custom-card .card-head .card-management-btns {
+  float: right;
+  scale: 130%;
+  display: flex;
+  gap: 5px;
+  transition: 0.2s;
+}
+.custom-card .card-head .card-management-btns i:hover {
+  opacity: 0.5;
+  cursor: pointer;
+}
+
+.custom-card .card-body {
+  padding: 25px;
+  padding-top: 15px !important;
+  height: 100%;
+}
+.custom-card .card-body span{
+  font-size: 15px;
+}
+
+.custom-card .card-body .card-title {
+  margin-top: 10px;
+}
+
+
+.custom-card .card-body .card-title h5 {
+  display: inline;
+}
+
+
+.custom-card .card-body .hourly-salary {
+  margin-bottom: 30px;
+  display: inline;
+}
+
+.custom-card .card-body .card-info {
+  color: gray;
+  margin: 13px 0;
+}
+
+.custom-card .card-body .aligned {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  text-align: center;
+  margin-top: 25px;
+  position: relative;
+
+}
+
+.custom-card .card-body .aligned a {
+  text-decoration: none;
+}
+
+
+.card-button {
+  border: 0;
+  border-radius: 8px;
+  width: 45%;
+  background-color: rgba(207, 235, 255, 1);
+  //background-size: 200% auto;
+  //background-image: linear-gradient(to right, #a1c4fd 0%, aliceblue 61%, #a1c4fd 100%);
+  color: black;
+  font-weight: bold;
+  padding: 5px 10px;
+  transition: 0.2s;
+}
+
+.card-button:only-child {
+  width: 70%;
+}
+.card-button:not(.disabled):hover{
+  background-color: rgb(187, 215, 235);
+  //background-position: right center;
+  color: black;
+}
+
+.disabled {
+  cursor: default !important;
+  opacity: 0.6;
+}
+
+
+
Index: jobvista-frontend/src/auth/RoutesConfig.js
===================================================================
--- jobvista-frontend/src/auth/RoutesConfig.js	(revision d8b6c91094bd4c748b347d914a3c4c3745d51587)
+++ jobvista-frontend/src/auth/RoutesConfig.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
@@ -5,4 +5,6 @@
 import {SignUpRecruiterForm} from "../views/auth/SignUpRecruiterForm";
 import {SignUpJobSeekerForm} from "../views/auth/SignUpJobSeekerForm";
+import {JobAdvertisements} from "../views/job_advertisements/JobAdvertisements";
+import {JobAdDetails} from "../views/job_advertisements/JobAdDetails";
 export const RoutesConfig = () => {
 
@@ -13,4 +15,7 @@
                 <Route path="/signup/recruiter" element={<SignUpRecruiterForm/>}></Route>
                 <Route path="/signup/job-seeker" element={<SignUpJobSeekerForm/>}></Route>
+                <Route path="/my-job-advertisements" element={<JobAdvertisements/>}></Route>
+                <Route path="/job-advertisements/view/:id" element={<JobAdDetails/>}></Route>
+                <Route path="/my-job-advertisements/view/:id" element={<JobAdDetails/>}></Route>
             </Routes>
     )
Index: jobvista-frontend/src/enumerations/EmploymentStatus.js
===================================================================
--- jobvista-frontend/src/enumerations/EmploymentStatus.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
+++ jobvista-frontend/src/enumerations/EmploymentStatus.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
@@ -0,0 +1,4 @@
+export default {
+    FULL_TIME: 'Full-time',
+    PART_TIME: 'Part-time',
+};
Index: jobvista-frontend/src/enumerations/JobType.js
===================================================================
--- jobvista-frontend/src/enumerations/JobType.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
+++ jobvista-frontend/src/enumerations/JobType.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
@@ -0,0 +1,4 @@
+export default {
+    JOB: 'JOB',
+    INTERNSHIP: 'INTERNSHIP',
+};
Index: jobvista-frontend/src/redux/actionTypes.js
===================================================================
--- jobvista-frontend/src/redux/actionTypes.js	(revision d8b6c91094bd4c748b347d914a3c4c3745d51587)
+++ jobvista-frontend/src/redux/actionTypes.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
@@ -4,2 +4,8 @@
 export const UPDATE_TOKEN = "UPDATE_TOKEN"
 export const CURRENT_USER = "CURRENT_USER"
+
+export const ADD_JOB_ADVERTISEMENT = "ADD_JOB_ADVERTISEMENT"
+export const EDIT_JOB_ADVERTISEMENT = "EDIT_JOB_ADVERTISEMENT"
+export const DELETE_JOB_ADVERTISEMENT = "DELETE_JOB_ADVERTISEMENT"
+export const FETCH_JOB_ADVERTISEMENTS = "FETCH_JOB_ADVERTISEMENTS"
+export const FETCH_JOB_ADVERTISEMENTS_BY_RECRUITER = "FETCH_JOB_ADVERTISEMENTS_BY_RECRUITER"
Index: jobvista-frontend/src/redux/actions/authActions.js
===================================================================
--- jobvista-frontend/src/redux/actions/authActions.js	(revision d8b6c91094bd4c748b347d914a3c4c3745d51587)
+++ jobvista-frontend/src/redux/actions/authActions.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
@@ -43,6 +43,7 @@
                 const response = jwtResponse.data;
                 const token = response.token;
-                //const refreshToken = response.refreshToken; // Corrected typo
+                //const refreshToken = response.refreshToken;
                 const user = {
+                    id: response.id,
                     email: response.email,
                     name: response.name,
Index: jobvista-frontend/src/redux/actions/jobAdvertisementActions.js
===================================================================
--- jobvista-frontend/src/redux/actions/jobAdvertisementActions.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
+++ jobvista-frontend/src/redux/actions/jobAdvertisementActions.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
@@ -0,0 +1,102 @@
+import axios from "../../axios/axiosInstance";
+import {
+    ADD_JOB_ADVERTISEMENT,
+    CURRENT_USER, DELETE_JOB_ADVERTISEMENT, EDIT_JOB_ADVERTISEMENT,
+    FETCH_JOB_ADVERTISEMENTS,
+    FETCH_JOB_ADVERTISEMENTS_BY_RECRUITER
+} from "../actionTypes";
+
+export const JobAdvertisementActions = {
+    addJobAdvertisement: (jobAdvertisement, callback) => {
+        return dispatch => {
+            axios.post("/job-advertisements/add", jobAdvertisement)
+                .then(response => {
+                    dispatch({
+                        type: ADD_JOB_ADVERTISEMENT,
+                        jobAdvertisement: response.data
+                    })
+                    callback(true, response)
+                }).catch((error) => {
+                callback(false, error)
+            })
+        }
+    },
+    editJobAdvertisement: (jobAdvertisement, id, callback) => {
+        return dispatch => {
+            axios.put("/job-advertisements/edit/" + id, jobAdvertisement)
+                .then(response => {
+                    dispatch({
+                        type: EDIT_JOB_ADVERTISEMENT,
+                        jobAdvertisement: response.data
+                    })
+                    callback(true, response)
+                }).catch((error) => {
+                callback(false, error)
+            })
+        }
+    },
+    deleteJobAdvertisement: (id, callback) => {
+        return dispatch => {
+            axios.delete("/job-advertisements/delete/" + id)
+                .then(response => {
+                    dispatch({
+                        type: DELETE_JOB_ADVERTISEMENT,
+                        id: id
+                    })
+                    callback(true)
+                }).catch(error => {
+                callback(false, error)
+            })
+
+        }
+    },
+    fetchJobAdvertisementById: (id, callback) => {
+        axios.get("/job-advertisements/view/" + id)
+            .then(response => {
+                callback(true, response)
+            }).catch(error => {
+                callback(false, error)
+            })
+    },
+
+    fetchJobAdvertisements: (callback) => {
+        return dispatch => {
+            axios.get("/job-advertisements/all")
+                .then(response => {
+                    dispatch({
+                        type: FETCH_JOB_ADVERTISEMENTS,
+                        jobAdvertisements: response.data,
+                    })
+                    callback(true, response)
+                }).catch((error) => {
+                callback(false, error)
+            })
+        }
+    },
+
+    fetchJobAdvertisementsByRecruiter: (id, callback) => {
+        return dispatch => {
+            let currentUser = JSON.parse(localStorage.getItem(CURRENT_USER));
+            axios.get("/job-advertisements/recruiter/" + currentUser.id)
+                .then(response => {
+                    dispatch({
+                        type: FETCH_JOB_ADVERTISEMENTS_BY_RECRUITER,
+                        jobAdvertisementsByRecruiter: response.data,
+                    })
+                    callback(true, response)
+                }).catch((error) => {
+                console.log("ERROR")
+                callback(false, error)
+            })
+        }
+    },
+
+    fetchRecruiterDetailsById: (id, callback) => {
+        axios.get("/recruiter/info/" + id)
+            .then(response => {
+                callback(true, response)
+            }).catch(error => {
+            callback(false, error)
+        })
+    }
+}
Index: jobvista-frontend/src/redux/reducers/authReducer.js
===================================================================
--- jobvista-frontend/src/redux/reducers/authReducer.js	(revision d8b6c91094bd4c748b347d914a3c4c3745d51587)
+++ jobvista-frontend/src/redux/reducers/authReducer.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
@@ -21,5 +21,5 @@
         case UPDATE_TOKEN:
             let token = action.payload;
-            let currentUser = null
+            let currentUser = "";
             if(!isExpired(token)) {
                 localStorage.setItem(AUTH_TOKEN, token);
@@ -37,11 +37,10 @@
             };
         case SIGN_OUT:
-            console.log("BRISAM")
             localStorage.removeItem(CURRENT_USER);
             localStorage.removeItem(AUTH_TOKEN);
             return {
                 ...state,
-                currentUser: null,
-                token: null
+                currentUser: "",
+                token: "",
             }
 
Index: jobvista-frontend/src/redux/reducers/jobAdvertisementReducer.js
===================================================================
--- jobvista-frontend/src/redux/reducers/jobAdvertisementReducer.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
+++ jobvista-frontend/src/redux/reducers/jobAdvertisementReducer.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
@@ -0,0 +1,63 @@
+import {
+    ADD_JOB_ADVERTISEMENT,
+    CURRENT_USER, DELETE_JOB_ADVERTISEMENT, EDIT_JOB_ADVERTISEMENT,
+    FETCH_JOB_ADVERTISEMENTS,
+    FETCH_JOB_ADVERTISEMENTS_BY_RECRUITER
+} from "../actionTypes";
+import {sortElementsByDateCreated} from "../../utils/utils";
+import {useSelector} from "react-redux";
+
+const initialState = {
+    jobAdvertisements: [],
+    jobAdvertisementsByRecruiter: []
+}
+
+let currentUser = JSON.parse(localStorage.getItem(CURRENT_USER))
+export const JobAdvertisementReducer = (state = initialState, action) => {
+    let jobAdvertisements;
+    let jobAdvertisementsByRecruiter;
+    switch (action.type) {
+        case ADD_JOB_ADVERTISEMENT:
+
+            return {
+                ...state,
+                jobAdvertisements: sortElementsByDateCreated([...state.jobAdvertisements, action.jobAdvertisement]),
+                jobAdvertisementsByRecruiter: sortElementsByDateCreated([...state.jobAdvertisementsByRecruiter, action.jobAdvertisement])
+            }
+        case EDIT_JOB_ADVERTISEMENT:
+            jobAdvertisements = state.jobAdvertisements.filter(jobAd => jobAd.id !== action.jobAdvertisement.id)
+            jobAdvertisementsByRecruiter = state.jobAdvertisementsByRecruiter.filter(jobAd => jobAd.id !== action.jobAdvertisement.id)
+
+            return {
+                jobAdvertisements: sortElementsByDateCreated([...jobAdvertisements, action.jobAdvertisement]),
+                jobAdvertisementsByRecruiter: sortElementsByDateCreated([...jobAdvertisementsByRecruiter, action.jobAdvertisement])
+            }
+        case DELETE_JOB_ADVERTISEMENT:
+            jobAdvertisements = state.jobAdvertisements.filter(jobAd => jobAd.id !== action.id)
+            jobAdvertisementsByRecruiter = state.jobAdvertisementsByRecruiter.filter(jobAd => jobAd.id !== action.id)
+
+            return {
+                jobAdvertisements: sortElementsByDateCreated([...jobAdvertisements]),
+                jobAdvertisementsByRecruiter: sortElementsByDateCreated([...jobAdvertisementsByRecruiter])
+            }
+
+        case FETCH_JOB_ADVERTISEMENTS:
+            return {
+                ...state,
+                jobAdvertisements: sortElementsByDateCreated(action.jobAdvertisements)
+            }
+
+        case FETCH_JOB_ADVERTISEMENTS_BY_RECRUITER:
+            return {
+                ...state,
+                jobAdvertisementsByRecruiter: sortElementsByDateCreated(action.jobAdvertisementsByRecruiter)
+            }
+
+        default:
+            return {
+                ...state,
+            };
+    }
+}
+
+export default JobAdvertisementReducer
Index: jobvista-frontend/src/redux/store.js
===================================================================
--- jobvista-frontend/src/redux/store.js	(revision d8b6c91094bd4c748b347d914a3c4c3745d51587)
+++ jobvista-frontend/src/redux/store.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
@@ -2,5 +2,5 @@
 import { combineReducers } from 'redux';
 import authReducer from "./reducers/authReducer";
-import { thunk } from 'redux-thunk';
+import jobAdReducer from "./reducers/jobAdvertisementReducer";
 
 // const rootReducer = combineReducers({
@@ -15,5 +15,6 @@
 export const store = configureStore({
     reducer: {
-        auth: authReducer
+        auth: authReducer,
+        jobAd: jobAdReducer
     },
 });
Index: jobvista-frontend/src/utils/utils.js
===================================================================
--- jobvista-frontend/src/utils/utils.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
+++ jobvista-frontend/src/utils/utils.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
@@ -0,0 +1,40 @@
+
+
+export const sortElementsByDateCreated = (array) => {
+    return array.slice().sort((a, b) => {
+        return new Date(b.postedAt).getTime() - new Date(a.postedAt).getTime()
+    });
+}
+
+export const formatRelativeTime = (dateString) => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffTime = now - date;
+
+    // Define time intervals in milliseconds
+    const minute = 60 * 1000;
+    const hour = minute * 60;
+    const day = hour * 24;
+    const week = day * 7;
+    const month = day * 30;
+
+    // Calculate the relative time
+    if (diffTime < minute) {
+        return 'just now';
+    } else if (diffTime < hour) {
+        const minutes = Math.floor(diffTime / minute);
+        return `${minutes} ${minutes === 1 ? 'min' : 'min'} ago`;
+    } else if (diffTime < day) {
+        const hours = Math.floor(diffTime / hour);
+        return `${hours} ${hours === 1 ? 'hour' : 'hours'} ago`;
+    } else if (diffTime < week) {
+        const days = Math.floor(diffTime / day);
+        return `${days} ${days === 1 ? 'day' : 'days'} ago`;
+    } else if (diffTime < month) {
+        const weeks = Math.floor(diffTime / week);
+        return `${weeks} ${weeks === 1 ? 'week' : 'weeks'} ago`;
+    } else {
+        const months = Math.floor(diffTime / month);
+        return `${months} ${months === 1 ? 'month' : 'months'} ago`;
+    }
+}
Index: jobvista-frontend/src/views/auth/SignInForm.js
===================================================================
--- jobvista-frontend/src/views/auth/SignInForm.js	(revision d8b6c91094bd4c748b347d914a3c4c3745d51587)
+++ jobvista-frontend/src/views/auth/SignInForm.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
@@ -70,5 +70,5 @@
                             <div className="d-grid mb-3">
                                 <button
-                                    className="btn btn-lg btn-primary text-uppercase fw-bold mb-2"
+                                    className="btn btn-lg auth-primary-btn text-uppercase fw-bold mb-2"
                                     type="submit">Sign in
                                 </button>
@@ -85,8 +85,8 @@
                         <div className="row">
                             <div className="col-md-6">
-                                <Link to="/signup/recruiter" className="btn btn-outline-primary text-uppercase fw-bold mb-2 w-100">SIGN UP AS RECRUITER</Link>
+                                <Link to="/signup/recruiter" className="btn auth-secondary-btn text-uppercase fw-bold mb-2 w-100">SIGN UP AS RECRUITER</Link>
                             </div>
                             <div className="col-md-6">
-                                <Link to="/signup/job-seeker" className="btn btn-outline-primary text-uppercase fw-bold mb-2 w-100">SIGN UP AS JOB SEEKER</Link>
+                                <Link to="/signup/job-seeker" className="btn auth-secondary-btn text-uppercase fw-bold mb-2 w-100">SIGN UP AS JOB SEEKER</Link>
                             </div>
                         </div>
Index: jobvista-frontend/src/views/auth/SignUpJobSeekerForm.js
===================================================================
--- jobvista-frontend/src/views/auth/SignUpJobSeekerForm.js	(revision d8b6c91094bd4c748b347d914a3c4c3745d51587)
+++ jobvista-frontend/src/views/auth/SignUpJobSeekerForm.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
@@ -83,5 +83,5 @@
                             <div className="d-grid mb-3">
                                 <button
-                                    className="btn btn-lg btn-primary text-uppercase fw-bold mb-2"
+                                    className="btn btn-lg auth-primary-btn text-uppercase fw-bold mb-2"
                                     type="submit">Submit
                                 </button>
Index: jobvista-frontend/src/views/auth/SignUpRecruiterForm.js
===================================================================
--- jobvista-frontend/src/views/auth/SignUpRecruiterForm.js	(revision d8b6c91094bd4c748b347d914a3c4c3745d51587)
+++ jobvista-frontend/src/views/auth/SignUpRecruiterForm.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
@@ -80,5 +80,5 @@
                             <div className="d-grid mb-3">
                                 <button
-                                    className="btn btn-lg btn-primary text-uppercase fw-bold mb-2"
+                                    className="btn btn-lg auth-primary-btn text-uppercase fw-bold mb-2"
                                     type="submit">Submit
                                 </button>
Index: jobvista-frontend/src/views/auth/auth.css
===================================================================
--- jobvista-frontend/src/views/auth/auth.css	(revision d8b6c91094bd4c748b347d914a3c4c3745d51587)
+++ jobvista-frontend/src/views/auth/auth.css	(revision 19398adb44637736271a04ab58b1f528cc33908f)
@@ -3,2 +3,26 @@
     padding: 5px 5px;
 }
+
+.form-container {
+    margin-bottom: 80px;
+}
+
+.auth-primary-btn{
+    background-color: rgba(1,38,90,0.80);
+    //background-color: #a1c4fd ;
+    color: white;
+}
+.auth-primary-btn:hover {
+    background-color: rgba(1,38,90,1);
+    color: white;
+}
+
+.auth-secondary-btn {
+    border: 2px solid rgba(1,38,90,0.7);
+    color: midnightblue;
+}
+
+.auth-secondary-btn:hover {
+    background-color: rgba(1,38,90,0.8);
+    color: white;
+}
Index: jobvista-frontend/src/views/dashboard/Dashboard.css
===================================================================
--- jobvista-frontend/src/views/dashboard/Dashboard.css	(revision 19398adb44637736271a04ab58b1f528cc33908f)
+++ jobvista-frontend/src/views/dashboard/Dashboard.css	(revision 19398adb44637736271a04ab58b1f528cc33908f)
@@ -0,0 +1,46 @@
+
+.head-dashboard-box {
+    height: 10%;
+    width: 100%;
+    background-color: #fff;
+    border-radius: 12px;
+    padding: 15px 20px;
+    margin-bottom: 20px;
+    margin-top: 30px;
+    height: auto;
+}
+
+
+.head-dashboard-box .head-component {
+    display: inline;
+}
+
+
+.head-dashboard-box .search-container {
+    position: relative;
+    float: left;
+}
+.head-dashboard-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: 35%;
+    display: inline-block;
+    margin-left: 10px;
+    float: right;
+}
Index: jobvista-frontend/src/views/dashboard/Dashboard.js
===================================================================
--- jobvista-frontend/src/views/dashboard/Dashboard.js	(revision d8b6c91094bd4c748b347d914a3c4c3745d51587)
+++ jobvista-frontend/src/views/dashboard/Dashboard.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
@@ -1,28 +1,133 @@
+import "./Dashboard.css"
+
+import {useDispatch, useSelector} from "react-redux";
+import {useEffect, useState} from "react";
+import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
+import {formatRelativeTime, sortElementsByDateCreated} from "../../utils/utils";
+import {dataRangeOptions, industryOptions, industryOptionsFilter, sortOptions} from "../selectOptions";
+import Select from "react-select";
+import Roles from "../../enumerations/Roles";
+import {Link} from "react-router-dom";
+import JobType from "../../enumerations/JobType";
+
 export const Dashboard = () => {
+
+    const dispatch = useDispatch();
+
+    const [jobAdvertisements, setJobAdvertisements] = useState([]);
+    let jobAdvertisementsState = useSelector(state => state.jobAd.jobAdvertisements)
+    const auth = useSelector(state => state.auth.currentUser);
+
+    const [role, setRole] = useState("");
+    const [sortOrder, setSortOrder] = useState("newest");
+    const [selectedDateRange, setSelectedDateRange] = useState("all");
+    const [searchTerm, setSearchTerm] = useState("");
+    const [dispatched, setDispatched] = useState(false)
+
+    useEffect(() => {
+        if (auth) {
+            setRole(auth.role);
+        }
+    }, [auth]);
+
+    useEffect(() => {
+        if(!dispatched && jobAdvertisementsState.length == 0) {
+            dispatch(JobAdvertisementActions.fetchJobAdvertisements((success, response) => {
+                if (success && response.data.length > 0) {
+                    setJobAdvertisements(sortElementsByDateCreated(response.data))
+                }
+                setDispatched(true)
+                console.log("Fetch all job advertisements GET")
+                console.log(response.data)
+            }))
+
+        } else {
+            setJobAdvertisements(jobAdvertisementsState)
+            console.log("Fetch all job advertisements STATE")
+        }
+    }, [])
 
 
     return (
         <div className="container">
-            <div className="row justify-content">
-                <div className="col-md-4">
-                    <div className="card">
-                        <h5 className="card-title">Job Listing Name</h5>
-                        <p>Job Listing Data</p>
+            <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>
+                            <input
+                                className="search-input"
+                                type="text"
+                                placeholder="Search job advertisement by title..."
+                                //value={searchTerm}
+                                //onChange={event => setSearchTerm(event.target.value)}
+                            />
+                        </div>
                     </div>
-                </div>
-                <div className="col-md-4">
-                    <div className="card">
-                        <h5 className="card-title">Job Listing Name</h5>
-                        <p>Job Listing Data</p>
-                    </div>
-                </div>
-                <div className="col-md-4">
-                    <div className="card">
-                        <h5 className="card-title">Job Listing Name</h5>
-                        <p>Job Listing Data</p>
+                    <div className="col-md-9">
+                        <div className="sort-section item">
+                            <Select
+                                defaultValue={{value: "all", label: "All industries"}}
+                                //value={sortOrder.value}
+                                //onChange ={option => setSortOrder(option.value)}
+                                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)}
+                                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>
                     </div>
                 </div>
             </div>
+            <div className="row row-cols-1 row-cols-md-4 g-4">
 
+                {jobAdvertisements &&
+                    jobAdvertisements.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>
+                                <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-advertisements/view/${jobAd.id}`} className="card-button">Read more</Link>
+                                        {role===Roles.JOBSEEKER &&
+                                            <>
+                                                {jobAd.active && <button className="card-button">Apply now</button> }
+                                                {!jobAd.active && <button className="card-button disabled">Apply now</button> }
+                                            </>
+                                        }
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+
+            </div>
         </div>
     )
Index: jobvista-frontend/src/views/job_advertisements/AddJobAdModal.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/AddJobAdModal.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
+++ jobvista-frontend/src/views/job_advertisements/AddJobAdModal.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
@@ -0,0 +1,145 @@
+import React, {useState} from "react";
+import "./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";
+
+
+export const AddJobAdModal = () => {
+    const [modal, setModal] = useState(false);
+    const dispatch = useDispatch();
+    const auth = useSelector(state => state.auth.currentUser)
+    const toggleModal = () => {
+        setModal(!modal);
+    };
+
+    const schema = yup.object().shape({
+        title: yup.string().required("Please enter a title"),
+        description: yup.string().required("Please enter a description"),
+        industry: yup.mixed().required("Select industry"),
+        startingSalary: yup.number().required("Please enter the starting salary"),
+        jobType: yup.mixed().required("Select job type"),
+        employmentStatus: yup.mixed().required("Select employment status"),
+    })
+
+    const {register, handleSubmit, control, formState: {errors}} = useForm({
+        resolver: yupResolver(schema),
+    });
+
+    const addJobAdvertisement = async (values) => {
+        //const description = values.description.replace(/\n/g, "\\n");
+        try {
+            dispatch(JobAdvertisementActions.addJobAdvertisement(
+                {
+                    email: auth.email,
+                    title: values.title,
+                    description: values.description,
+                    industry: values.industry.value,
+                    startingSalary: values.startingSalary,
+                    activeUntil: values.date,
+                    jobType: values.jobType.value,
+                    employmentStatus: values.employmentStatus.value,
+                }, (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">
+            <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">
+
+                                <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")}/>
+
+
+                            </div>
+                        </div>
+
+                        <div className="aligned">
+                            <button className="submit-btn"> Submit</button>
+                        </div>
+
+                    </form>
+                </div>
+            </Modal>
+        </div>)
+}
Index: jobvista-frontend/src/views/job_advertisements/DeleteJobAdModal.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/DeleteJobAdModal.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
+++ jobvista-frontend/src/views/job_advertisements/DeleteJobAdModal.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
@@ -0,0 +1,59 @@
+import React, {useState} from "react";
+import "./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";
+
+
+export const DeleteJobAdModal = (jobAd) => {
+    const [modal, setModal] = useState(false);
+    const dispatch = useDispatch();
+    const auth = useSelector(state => state.auth.currentUser)
+    const toggleModal = () => {
+        setModal(!modal);
+    };
+
+    const addJobAdvertisement = async () => {
+        try {
+            dispatch(JobAdvertisementActions.deleteJobAdvertisement(jobAd.props.id, (success, response) => {
+                if (success) {
+                    console.log("Job Advertisement deleted")
+                    toggleModal()
+                }
+            }))
+        } catch (err) {
+            console.error(err)
+        }
+    }
+
+    return (<div className="modal-wrap">
+        <i className="fa-solid fa-trash trash-delete-btn" onClick={toggleModal}></i>
+        <Modal open={modal} onClose={toggleModal} center classNames="job-advertisement-modal">
+            <i className="fa-solid fa-x btn-close-modal" style={{color: "black"}} onClick={toggleModal}></i>
+            <div className="modal-delete-content">
+                <div className="row modal-delete-content-inside">
+                    <div className="col-md-1"><i className="fa-regular fa-circle-xmark x-icon"></i></div>
+                    <div className="col-md-11 modal-delete-text">
+                        <h4>Are you sure?</h4>
+                        <p>Do you really want to delete this advertisement? This process cannot be undone.</p>
+                    </div>
+                </div>
+                <div className="modal-delete-buttons">
+                    <button className="cancel-btn" onClick={toggleModal}>Cancel</button>
+                    <button className="delete-btn" onClick={addJobAdvertisement}> Delete</button>
+                </div>
+            </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 19398adb44637736271a04ab58b1f528cc33908f)
@@ -0,0 +1,161 @@
+import React, {useEffect, useState} from "react";
+import "./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";
+
+
+export const EditJobAdModal = (jobAd) => {
+    const [modal, setModal] = useState(false);
+    const dispatch = useDispatch();
+    const auth = useSelector(state => state.auth.currentUser)
+    const toggleModal = () => {
+        setModal(!modal);
+    };
+
+    const schema = yup.object().shape({
+        title: yup.string().required("Please enter a title"),
+        description: yup.string().required("Please enter a description"),
+        industry: yup.mixed().required("Select industry"),
+        startingSalary: yup.number().required("Please enter the starting salary"),
+        jobType: yup.mixed().required("Select job type"),
+        employmentStatus: yup.mixed().required("Select employment status"),
+    })
+
+    const {register, handleSubmit, control, formState: {errors}} = useForm({
+        resolver: yupResolver(schema),
+    });
+    const editJobAdvertisement = async (values) => {
+        try {
+            dispatch(JobAdvertisementActions.editJobAdvertisement(
+                {
+                    email: auth.email,
+                    title: values.title,
+                    description: values.description,
+                    industry: values.industry.value,
+                    startingSalary: values.startingSalary,
+                    activeUntil: values.date,
+                    jobType: values.jobType.value,
+                    employmentStatus: values.employmentStatus.value,
+                }, jobAd.props.id, (success, response) => {
+                    if(success) {
+                        console.log("Job Advertisement edited")
+                        toggleModal()
+                    }
+                }
+            ))
+        } catch (err) {
+            console.error(err)
+        }
+    }
+
+    let minimumDate = new Date();
+    minimumDate.setDate(minimumDate.getDate() + 1);
+
+    return (<div className="modal-wrap">
+
+        <i className="fa-solid fa-pen-to-square pen-edit-btn" onClick={() => {
+            // setSelectedRecord(record);
+                toggleModal()
+        }}></i>
+        <Modal open={modal} onClose={toggleModal} center classNames="job-advertisement-modal">
+            <div className="head-modal">
+                <h3>Edit Job Advertisement</h3>
+                <i className="fa-solid fa-x btn-close-modal" onClick={toggleModal}></i>
+            </div>
+
+            <div className="modal-content">
+                <form onSubmit={handleSubmit(editJobAdvertisement)}>
+                    <div className="row">
+                        <div className="col-md-7">
+                            <label className="label">Job title:</label>
+                            <input type="text" defaultValue={jobAd.props.title} {...register("title")}/>
+                            <p style={{color: "red"}}>{errors.title?.message}</p>
+
+                            <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")}/>
+                            <p style={{color: "red"}}>{errors.description?.message}</p>
+                        </div>
+
+                        <div className="col-md-5">
+                            <label className="label">Hourly rate:</label>
+                            <input defaultValue={jobAd.props.startingSalary} {...register("startingSalary")}/>
+                            <p style={{color: "red"}}>{errors.startingSalary?.message}</p>
+
+                            <label className="label">Industry:</label>
+                            <Controller
+                                name="industry"
+                                control={control}
+                                defaultValue={{
+                                    label: jobAd.props.industry,
+                                    value: jobAd.props.industry
+                                }}
+                                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}
+                                defaultValue={{
+                                    value: jobAd.props.jobType,
+                                    label: jobAd.props.jobType==="JOB" ? "Job" : "Internship"
+                                }}
+                                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}
+                                defaultValue={{
+                                    value: jobAd.props.employmentStatus,
+                                    label: jobAd.props.employmentStatus==="FULL_TIME" ? "Full time" : "Part time"
+                                }}
+                                render={({ field }) => (
+                                    <Select
+                                    {...field}
+                                    options={employmentStatusOptions}
+                                />)}
+                            />
+                            <p style={{color: "red"}}>{errors.employmentStatus?.message}</p>
+
+                            <label htmlFor="start">Active until:</label>
+                            <input type="date" defaultValue={new Date(jobAd.props.activeUntil).toLocaleDateString('en-CA')}
+                                   min={minimumDate.toLocaleDateString('en-CA')} onChange={(event) => console.log(event.target.value)}
+                                   {...register("date")}/>
+
+
+                        </div>
+                    </div>
+
+                    <div className="aligned">
+                        <button className="submit-btn"> Submit</button>
+                    </div>
+
+                </form>
+            </div>
+        </Modal>
+    </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 19398adb44637736271a04ab58b1f528cc33908f)
@@ -0,0 +1,166 @@
+
+.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;
+
+}
+
+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;*/
+}
+
+
+
+
+
Index: jobvista-frontend/src/views/job_advertisements/JobAdDetails.css
===================================================================
--- jobvista-frontend/src/views/job_advertisements/JobAdDetails.css	(revision 19398adb44637736271a04ab58b1f528cc33908f)
+++ jobvista-frontend/src/views/job_advertisements/JobAdDetails.css	(revision 19398adb44637736271a04ab58b1f528cc33908f)
@@ -0,0 +1,66 @@
+
+/*font-family: 'Ubuntu', sans-serif;*/
+/*font-family: 'Cairo', sans-serif;*/
+/*font-family: 'Poppins', sans-serif;*/
+
+* {
+    //font-family: Poppins, sans-serif;
+}
+
+.details-wrap {
+    width: 100%;
+    //height: auto;
+    height: 80vh;
+    overflow-y: auto;
+    background-color: #fff;
+    border-radius: 12px;
+    padding: 15px 20px;
+    margin-bottom: 20px;
+    margin-top: 30px;
+}
+
+.details-wrap .details-head-info {
+    font-size: 18px;
+}
+
+.job-type, .expired {
+    font-size: 16px;
+    padding: 3px 8px;
+    border-radius: 5px;
+    font-family: Poppins;
+   position: relative;
+    bottom: 5px;
+    margin-left: 13px;
+}
+
+.expired {
+    background-color: transparent;
+    border: 1px solid indianred;
+    color: indianred;
+    font-weight: 600;
+}
+
+.job-type {
+    background-color: indianred;
+    color: white;
+}
+
+.title {
+    //display: inline-flex;
+    //justify-items: start;
+    display: block;
+}
+
+.title h2, .title span {
+    display: inline-block;
+}
+
+.apply:not(.expired) {
+    width: 20% !important;
+    background-size: 200% auto;
+
+}
+.apply:not(.expired):hover {
+    width: 20% !important;
+    background-position: right center;
+}
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 19398adb44637736271a04ab58b1f528cc33908f)
@@ -0,0 +1,95 @@
+import "./JobAdDetails.css"
+import {useEffect, useState} from "react";
+import {useDispatch, useSelector} from "react-redux";
+import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
+import {useParams} from "react-router";
+import Roles from "../../enumerations/Roles";
+import JobType from "../../enumerations/JobType";
+import EmploymentStatus from "../../enumerations/EmploymentStatus";
+import {formatRelativeTime} from "../../utils/utils";
+import {AddJobAdModal} from "./AddJobAdModal";
+
+
+export const JobAdDetails = () => {
+    const dispatch = useDispatch();
+    const [jobAd, setJobAd] = useState("")
+    const [recruiterDetails, setRecruiterDetails] = useState("");
+    const [role, setRole] = useState("")
+    const {id} = useParams();
+    const auth = useSelector(state => state.auth.currentUser);
+
+    useEffect(() => {
+        setRole(auth.role)
+    }, [auth])
+
+
+    useEffect(() => {
+        JobAdvertisementActions.fetchJobAdvertisementById(id, (success, response) => {
+            if (success) {
+                setJobAd(response.data)
+                JobAdvertisementActions.fetchRecruiterDetailsById(response.data.recruiterId, (successAgain, responseAgain) => {
+                    if(successAgain) {
+                        setRecruiterDetails(responseAgain.data)
+                    }
+                })
+            }
+        });
+    }, [])
+    return (<div className="container">
+        <div className="row">
+            <div className="col-md-9">
+                <div className="details-wrap">
+
+                    <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>
+
+                    <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===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>
+                    {jobAd.description && (
+                        <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> }
+                        </>
+                    }
+
+                </div>
+            </div>
+            <div className="col-md-3">
+                <div className="details-wrap">
+                    <h3>{jobAd.recruiterName}</h3>
+
+                    {/*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.
+                        <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..
+                    </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>
+            </div>
+
+        </div>
+
+
+
+    </div>)
+}
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 19398adb44637736271a04ab58b1f528cc33908f)
@@ -0,0 +1,45 @@
+.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 19398adb44637736271a04ab58b1f528cc33908f)
@@ -0,0 +1,125 @@
+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, sortElementsByDateCreated} from "../../utils/utils";
+import {dataRangeOptions, industryOptions, 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 = () => {
+
+    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 [sortOrder, setSortOrder] = useState("newest");
+    const [selectedDateRange, setSelectedDateRange] = 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("deleteThis", (success, response) => {
+                if (success && response.data.length > 0) {
+                    setJobAdvertisementsByRecruiter(sortElementsByDateCreated(response.data))
+                }
+                console.log("Fetch job advertisements by recruiter GET")
+            }))
+            setDispatched(true);
+
+        } else {
+            setJobAdvertisementsByRecruiter(jobAdvertisementsByRecruiterState)
+            console.log("Fetch job advertisements by recruiter STATE")
+        }
+    }, [jobAdvertisementsByRecruiterState])
+
+    return (
+        <div className="container">
+            <div className="head-job-advertisements-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>
+                            <input
+                                className="search-input"
+                                type="text"
+                                placeholder="Search job advertisement by title..."
+                                //value={searchTerm}
+                                //onChange={event => setSearchTerm(event.target.value)}
+                            />
+                        </div>
+                    </div>
+                    <div className="col-md-9">
+
+                        <AddJobAdModal/>
+                        <div className="sort-section item">
+                            <Select
+                                defaultValue={{value: "newest", label: "Date (Newest First)"}}
+                                //value={sortOrder.value}
+                                //onChange ={option => setSortOrder(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>
+                    </div>
+                </div>
+            </div>
+            <div className="row row-cols-1 row-cols-md-4 g-4">
+
+                {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/view/${jobAd.id}`} className="card-button solo">View applications</Link>
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+
+            </div>
+        </div>
+    )
+}
Index: jobvista-frontend/src/views/selectOptions.js
===================================================================
--- jobvista-frontend/src/views/selectOptions.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
+++ jobvista-frontend/src/views/selectOptions.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
@@ -0,0 +1,64 @@
+export const industryOptions = [
+    { value: "Information Technology", label: "Information Technology" },
+    { value: "Finance", label: "Finance" },
+    { value: "Healthcare", label: "Healthcare" },
+    { value: "Education", label: "Education" },
+    { value: "Engineering", label: "Engineering" },
+    { value: "Retail", label: "Retail" },
+    { value: "Hospitality", label: "Hospitality" },
+    { value: "Manufacturing", label: "Manufacturing" },
+    { value: "Construction", label: "Construction" },
+    { value: "Marketing", label: "Marketing" },
+    { value: "Media", label: "Media" },
+    { value: "Telecommunications", label: "Telecommunications" },
+    { value: "Transportation", label: "Transportation" },
+    { value: "Government", label: "Government" },
+    { value: "Consulting", label: "Consulting" }
+];
+
+export const industryOptionsFilter = [
+    { value: "all", label: "All industries" },
+    { value: "Information Technology", label: "Information Technology" },
+    { value: "Finance", label: "Finance" },
+    { value: "Healthcare", label: "Healthcare" },
+    { value: "Education", label: "Education" },
+    { value: "Engineering", label: "Engineering" },
+    { value: "Retail", label: "Retail" },
+    { value: "Hospitality", label: "Hospitality" },
+    { value: "Manufacturing", label: "Manufacturing" },
+    { value: "Construction", label: "Construction" },
+    { value: "Marketing", label: "Marketing" },
+    { value: "Media", label: "Media" },
+    { value: "Telecommunications", label: "Telecommunications" },
+    { value: "Transportation", label: "Transportation" },
+    { value: "Government", label: "Government" },
+    { value: "Consulting", label: "Consulting" }
+];
+
+export const jobTypeOptions = [
+    {value: "JOB", label: "Job"},
+    {value: "INTERNSHIP", label: "Internship"},
+]
+
+export const employmentStatusOptions = [
+    {value: "FULL_TIME", label: "Full time"},
+    {value: "PART_TIME", label: "Part time"}
+]
+
+export const dataRangeOptions = [
+    {value: "all", label: "Lifetime"},
+    {value: "7days", label: "Last 7 days"},
+    {value: "30days", label: "Last 30 days"},
+    {value: "90days", label: "Last 90 days"},
+    {value: "12months", label: "Last 12 months"},
+    {value: "today", label: "Today"},
+    {value: "thisMonth", label: "This month"},
+    {value: "12months", label: "This year"},
+]
+
+export const sortOptions = [
+    { value: "newest", label: "Date (Newest First)" },
+    { value: "oldest", label: "Date (Oldest First)" },
+    { value: "highest", label: "Salary (High to Low)" },
+    { value: "lowest", label: "Salary (Low to High)" },
+]
Index: jobvista-frontend/src/views/static/Header.js
===================================================================
--- jobvista-frontend/src/views/static/Header.js	(revision d8b6c91094bd4c748b347d914a3c4c3745d51587)
+++ jobvista-frontend/src/views/static/Header.js	(revision 19398adb44637736271a04ab58b1f528cc33908f)
@@ -5,12 +5,14 @@
 import {AuthActions} from "../../redux/actions/authActions";
 import Roles from "../../enumerations/Roles";
+import {useNavigate} from "react-router";
 
-export const Header = () => {
+export const Header = (props) => {
 
     const auth = useSelector(state => state.auth.currentUser);
     const dispatch = useDispatch();
+    const navigator = useNavigate();
 
-    const [role, setRole] = useState(null);
-    const [username, setUsername] = useState(null);
+    const [role, setRole] = useState("");
+    const [username, setUsername] = useState("");
 
     const signOut = () => {
@@ -20,5 +22,4 @@
 
     useEffect(() => {
-
         if (auth) {
             setRole(auth.role);
@@ -34,9 +35,9 @@
                 <div className="collapse navbar-collapse" id="navbarSupportedContent">
                     <ul className="navbar-nav me-auto mb-2 mb-lg-0">
-                        <NavLink to="/" className="nav-item nav-link" activeClassName="active">Home</NavLink>
+                        <NavLink to="/" className="nav-item nav-link">Home</NavLink>
                         {role==Roles.JOBSEEKER &&
                             <>
-                                <NavLink to="/applications" className="nav-item nav-link" activeClassName="active">Applications</NavLink>
-                                <NavLink to="/favoritejobs" className="nav-item nav-link" activeClassName="active">Saved</NavLink>
+                                <NavLink to="/applications" className="nav-item nav-link" >Applications</NavLink>
+                                <NavLink to="/favoritejobs" className="nav-item nav-link" >Saved</NavLink>
                             </>
 
@@ -44,6 +45,6 @@
                         {role==Roles.RECRUITER &&
                             <>
-                                <NavLink to="/jobadvertisements" className="nav-item nav-link" activeClassName="active">Job Advertisements</NavLink>
-                                <NavLink to="/favoritejobs" className="nav-item nav-link" activeClassName="active">Saved</NavLink>
+                                <NavLink to="/my-job-advertisements" className="nav-item nav-link" >Job Advertisements</NavLink>
+                                <NavLink to="/favoritejobs" className="nav-item nav-link" >Saved</NavLink>
                             </>
                         }
@@ -61,8 +62,8 @@
 
 
-                            <Link onClick={signOut} className="btn btn-outline-secondary">Log out</Link>
+                            <Link onClick={signOut} className="btn auth-secondary-btn">Log out</Link>
                         </> :
                         <>
-                            <Link to="/signin" className="btn btn-outline-secondary">Sign in</Link>
+                            <Link to="/signin" className="btn auth-secondary-btn">Sign in</Link>
                         </>
                     }
