Index: jobvista-frontend/src/App.css
===================================================================
--- jobvista-frontend/src/App.css	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
+++ jobvista-frontend/src/App.css	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -14,5 +14,5 @@
 .App {
   /*background-color: rgb(243, 242, 241);*/
-  background-color: #F5F5F5;
+  background-color: #E6E6E6;
   /*background-color: #F4F2EE;*/
   /*background-color: #0F0F0F;*/
@@ -84,5 +84,5 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   transform: translate(0, 0);
-  height: 260px;
+  height: 270px;
   width: 100%;
   color: grey;
@@ -101,5 +101,4 @@
 
 .custom-card {
-  //border: 1px solid lightgray;
   border-radius: 8px;
   background-color: white;
@@ -107,6 +106,24 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   transform: translate(0, 0);
+  height: 360px;
+}
+
+.hub-card {
+  height: 270px !important;
+}
+
+.custom-card .card-foot {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  text-align: center;
   height: auto;
-}
+  width: 100%;
+  bottom: 20px;
+}
+
+
+
 
 .custom-card:hover {
@@ -118,4 +135,5 @@
   padding: 25px;
   padding-bottom: 0 !important;
+  height: 20%;
 }
 
@@ -147,7 +165,7 @@
 
 .custom-card .card-body {
-  padding: 25px;
-  padding-top: 15px !important;
-  height: 100%;
+  padding: 0 25px;
+  padding-top: 5px !important;
+  height: 50%;
 }
 .custom-card .card-body span{
@@ -175,17 +193,5 @@
 }
 
-.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;
-}
+
 
 
Index: jobvista-frontend/src/auth/RoutesConfig.js
===================================================================
--- jobvista-frontend/src/auth/RoutesConfig.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
+++ jobvista-frontend/src/auth/RoutesConfig.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -4,5 +4,5 @@
 import {SignUpRecruiterForm} from "../views/auth/SignUpRecruiterForm";
 import {SignUpJobSeekerForm} from "../views/auth/SignUpJobSeekerForm";
-import {Workspace} from "../views/job_advertisements/RecruiterWorkspace";
+import {Workspace} from "../views/job_advertisements/JobManagementHub";
 import {JobAdDetails} from "../views/job_advertisements/JobAdDetails";
 import {ApplicationsByJobAd} from "../views/applications/ApplicationsByJobAd";
@@ -10,12 +10,13 @@
 
 import {AdminPanel} from "../views/admin_panel/AdminPanel";
-import {RecruiterProfile} from "../views/recruiters/RecruiterProfile";
+import {RecruiterProfile} from "../views/profiles/RecruiterProfile";
 import {AboutUs} from "../views/static/AboutUs";
-import {JobSeekerEditProfile} from "../views/edit_profile/JobSeekerEditProfile";
-import {RecruiterEditProfile} from "../views/edit_profile/RecruiterEditProfile";
+import {JobSeekerEditProfile} from "../views/profiles/JobSeekerEditProfile";
+import {RecruiterEditProfile} from "../views/profiles/RecruiterEditProfile";
 import Roles from "../enumerations/Roles";
 import {useSelector} from "react-redux";
 import {useEffect, useState} from "react";
 import {ErrorPage} from "../views/static/ErrorPage";
+import {NoAccess} from "../views/static/NoAccess";
 
 export const PrivateRoutes = [
@@ -158,4 +159,14 @@
             Roles.JOBSEEKER,
             Roles.ADMIN
+        ]
+    },
+    {
+        component: NoAccess,
+        path: '/no-access',
+        title: 'No Access',
+        exact: true,
+        permission: [
+            Roles.GUEST,
+            Roles.RECRUITER,
         ]
     },
Index: jobvista-frontend/src/redux/actions/JobSeekerActions.js
===================================================================
--- jobvista-frontend/src/redux/actions/JobSeekerActions.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
+++ jobvista-frontend/src/redux/actions/JobSeekerActions.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -0,0 +1,67 @@
+import axios from "../../axios/axiosInstance";
+import {SET_PROFILE_PIC_URL} from "../actionTypes";
+
+export const JobSeekerActions = {
+
+    submitProfilePic: (formData, callback) => {
+        let jobSeekerId = formData.get("jobSeekerId");
+        let profilePicFile =  formData.get("profilePicFile")
+        return dispatch => {
+            axios.post("/job-seeker/submit-profile-pic", formData, {
+                headers: {
+                    'Content-Type': 'multipart/form-data'
+                }
+            })
+                .then(response => {
+                    const blob = new Blob([profilePicFile])
+                    const profilePicUrl = window.URL.createObjectURL(blob);
+                    dispatch({
+                        type: SET_PROFILE_PIC_URL,
+                        payload: {jobSeekerId, profilePicUrl}
+                    })
+                    callback(true, response)
+                }).catch(error => {
+                    callback(false, error)
+            })
+        }
+    },
+
+    downloadProfilePic: (jobSeekerId, callback) => {
+        return dispatch => {
+            return axios.get("/job-seeker/" + jobSeekerId + "/download-profile-pic", {responseType: "blob"})
+                .then(response => {
+                    const blob = new Blob([response.data])
+                    const profilePicUrl = window.URL.createObjectURL(blob);
+                    dispatch({
+                        type: SET_PROFILE_PIC_URL,
+                        payload: {jobSeekerId, profilePicUrl}
+                    });
+                    callback(true, profilePicUrl)
+                }).catch(error => {
+                    callback(false, error)
+                })
+        }
+    },
+
+    fetchJobSeekerEditDetailsById: (id, callback) => {
+        return dispatch => {
+            return axios.get("/job-seeker/"+id+"/edit-info")
+                .then(response => {
+                    callback(true, response)
+                }).catch(error => {
+                    callback(false, error)
+                })
+        }
+    },
+
+    editJobSeekerDetailsById: (data, id, callback) => {
+        return dispatch => {
+            return axios.post("/job-seeker/"+id+"/edit-info", data)
+                .then(response => {
+                    callback(true, response)
+                }).catch(error => {
+                    callback(false, error)
+                })
+        }
+    }
+}
Index: jobvista-frontend/src/redux/actions/applicationActions.js
===================================================================
--- jobvista-frontend/src/redux/actions/applicationActions.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
+++ jobvista-frontend/src/redux/actions/applicationActions.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -10,5 +10,5 @@
     submitApplication: (application, callback) => {
         return dispatch => {
-            axios.post("/job-advertisements/apply", application, {
+            axios.post("/applications/submit", application, {
                 headers: {
                     'Content-Type': 'multipart/form-data'
@@ -26,38 +26,36 @@
             })
         }
-
     },
     updateApplicationStatus: (id, status, callback) => {
         console.log(status)
-      return dispatch => {
-            // TO DO: REFACTOR
-          axios.post("/applications/" + id + "/update", {
-              id: id,
-              status: status
-          })
-              .then(response => {
-                  dispatch({
-                      type: UPDATE_APPLICATION_STATUS,
-                      application: response.data,
-                  })
-                  callback(true, response)
-              }).catch(error => {
-              callback(false, error)
-          })
-      }
+        return dispatch => {
+            axios.post("/applications/" + id + "/update", {
+                id: id,
+                status: status
+            })
+                .then(response => {
+                    dispatch({
+                        type: UPDATE_APPLICATION_STATUS,
+                        application: response.data,
+                    })
+                    callback(true, response)
+                }).catch(error => {
+                callback(false, error)
+            })
+        }
     },
     fetchApplicationsByJobSeeker: (jobSeekerId, callback) => {
-      return dispatch => {
-          axios.get("/my-applications/" + jobSeekerId)
-              .then(response => {
-                  dispatch({
-                      type: FETCH_APPLICATIONS_BY_JOB_SEEKER_ID,
-                      applicationsByJobSeeker: response.data
-                  })
-                  callback(true, response)
-              }).catch(error => {
-                  callback(false, error)
-          })
-      }
+        return dispatch => {
+            axios.get("/my-applications/" + jobSeekerId)
+                .then(response => {
+                    dispatch({
+                        type: FETCH_APPLICATIONS_BY_JOB_SEEKER_ID,
+                        applicationsByJobSeeker: response.data
+                    })
+                    callback(true, response)
+                }).catch(error => {
+                callback(false, error)
+            })
+        }
     },
 
@@ -77,17 +75,15 @@
         }
     },
-    downloadResume: (fileName, callback) => {
-        return dispatch => {
-            return axios.get("/resume/" + fileName, {responseType: "blob"})
-                .then(response => {
-                    const blob = new Blob([response.data], { type: 'application/pdf' });
-                    const url = window.URL.createObjectURL(blob);
-                    callback(true, url);
-                })
+    downloadResume: (id, callback) => {
+        return axios.get("/applications/" + id + "/download-resume", {responseType: "blob"})
+            .then(response => {
+                const blob = new Blob([response.data], {type: 'application/pdf'});
+                const url = window.URL.createObjectURL(blob);
+                callback(true, url);
+            })
+            .catch(error => {
+                callback(false, error)
+            })
 
-                .catch(error => {
-                    callback(false, error)
-                })
-        }
     }
 }
Index: jobvista-frontend/src/redux/actions/jobAdvertisementActions.js
===================================================================
--- jobvista-frontend/src/redux/actions/jobAdvertisementActions.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
+++ jobvista-frontend/src/redux/actions/jobAdvertisementActions.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -10,9 +10,5 @@
     addJobAdvertisement: (jobAdvertisement, callback) => {
         return dispatch => {
-            axios.post("/job-advertisements/add",  jobAdvertisement, {
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-            })
+            axios.post("/job-advertisements/add", jobAdvertisement)
                 .then(response => {
                     dispatch({
@@ -20,7 +16,8 @@
                         jobAdvertisement: response.data
                     })
-                    callback(true, response)
+                    callback(true)
                 }).catch((error) => {
-                callback(false, error)
+                console.error(error)
+                callback(false)
             })
         }
@@ -34,7 +31,8 @@
                         jobAdvertisement: response.data
                     })
-                    callback(true, response)
+                    callback(true)
                 }).catch((error) => {
-                callback(false, error)
+                console.error(error)
+                callback(false)
             })
         }
@@ -50,5 +48,6 @@
                     callback(true)
                 }).catch(error => {
-                callback(false, error)
+                console.error(error)
+                callback(false)
             })
 
@@ -83,5 +82,6 @@
                 callback(true, response)
             }).catch((error) => {
-            callback(false, error)        })
+            callback(false, error)
+        })
 
     },
@@ -96,4 +96,16 @@
                         jobAdvertisementsByRecruiter: response.data,
                     })
+                    callback(true, response)
+                }).catch((error) => {
+                callback(false, error)
+            })
+        }
+    },
+
+    fetchJobAdvertisementsByRecruiterProfile: (recruiterId, callback) => {
+        return dispatch => {
+            let currentUser = JSON.parse(localStorage.getItem(CURRENT_USER));
+            axios.get("/job-advertisements/recruiter/" + recruiterId)
+                .then(response => {
                     callback(true, response)
                 }).catch((error) => {
@@ -116,5 +128,5 @@
 
     fetchRecruiterDetailsById: (id, callback) => {
-        axios.get("/recruiter/"+id+"/info")
+        axios.get("/recruiter/" + id + "/info")
             .then(response => {
                 callback(true, response)
Index: jobvista-frontend/src/redux/actions/recruiterActions.js
===================================================================
--- jobvista-frontend/src/redux/actions/recruiterActions.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
+++ jobvista-frontend/src/redux/actions/recruiterActions.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -0,0 +1,66 @@
+
+import axios from "../../axios/axiosInstance";
+import {SET_LOGO_URL} from "../actionTypes";
+export const RecruiterActions =  {
+    submitLogo: (formData, callback) => {
+        let recruiterId = formData.get("recruiterId");
+        let logoFile =  formData.get("logoFile")
+        return dispatch => {
+            axios.post("/recruiter/submit-logo", formData, {
+                headers: {
+                    'Content-Type': 'multipart/form-data'
+                }
+            })
+                .then(response => {
+                    const blob = new Blob([logoFile])
+                    const logoUrl = window.URL.createObjectURL(blob);
+                    dispatch({
+                        type: SET_LOGO_URL,
+                        payload: { recruiterId, logoUrl }
+                    });
+                    callback(true, response)
+                }).catch(error => {
+                    callback(false, error)
+            })
+        }
+    },
+
+    downloadLogo: (recruiterId, callback) => {
+        return dispatch => {
+            return axios.get("/recruiter/" + recruiterId + "/download-logo", {responseType: "blob"})
+                .then(response => {
+                    const blob = new Blob([response.data])
+                    const logoUrl = window.URL.createObjectURL(blob);
+                    dispatch({
+                        type: SET_LOGO_URL,
+                        payload: { recruiterId, logoUrl }
+                    });
+                    callback(true, logoUrl);
+                }).catch(error => {
+                    callback(false, error)
+                })
+        }
+    },
+
+    fetchRecruiterEditDetailsById: (id, callback) => {
+        return dispatch => {
+            return axios.get("/recruiter/"+id+"/edit-info")
+                .then(response => {
+                    callback(true, response)
+                }).catch(error => {
+                    callback(false, error)
+                })
+        }
+    },
+
+    editRecruiterDetailsById: (data, id, callback) => {
+        return dispatch => {
+            return axios.post("/recruiter/"+id+"/edit-info", data)
+                .then(response => {
+                    callback(true, response)
+                }).catch(error => {
+                    callback(false, error)
+                })
+        }
+    }
+}
Index: jobvista-frontend/src/redux/reducers/imagesReducer.js
===================================================================
--- jobvista-frontend/src/redux/reducers/imagesReducer.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
+++ jobvista-frontend/src/redux/reducers/imagesReducer.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -0,0 +1,32 @@
+import {SET_LOGO_URL, SET_PROFILE_PIC_URL} from "../actionTypes";
+
+const initialState = {
+    profilePictures: {},
+    logos: {}
+}
+
+const ImagesReducer = (state = initialState, action) => {
+
+    switch (action.type) {
+        case SET_PROFILE_PIC_URL:
+            return{
+                ...state,
+                profilePictures: {
+                   ...state.profilePictures, [action.payload.jobSeekerId]: action.payload.profilePicUrl
+                }
+            }
+        case SET_LOGO_URL:
+            return {
+                ...state,
+                logos: {
+                    ...state.logos, [action.payload.recruiterId]: action.payload.logoUrl
+                }
+            }
+        default:
+            return {
+                ...state,
+            };
+    }
+}
+
+export default ImagesReducer
Index: jobvista-frontend/src/utils/toastUtils.js
===================================================================
--- jobvista-frontend/src/utils/toastUtils.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
+++ jobvista-frontend/src/utils/toastUtils.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -0,0 +1,173 @@
+import { toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+
+export const notifyProfileEdit = () => {
+    toast.success(
+        <span>
+            Your details were successfully updated!
+        </span>, {
+            position: "bottom-right",
+            autoClose: 5000,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: false,
+            draggable: true,
+            progress: undefined,
+            theme: "dark",
+            pauseOnFocusLoss: false
+        });
+}
+
+export const notifyProfilePicChange = () => {
+    toast.success(
+        <span>
+            Your profile picture was successfully changed!
+        </span>, {
+            position: "bottom-right",
+            autoClose: 5000,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: false,
+            draggable: true,
+            progress: undefined,
+            theme: "dark",
+            pauseOnFocusLoss: false
+        });
+}
+
+export const notifyLogoChange = () => {
+    toast.success(
+        <span>
+            Your logo was successfully changed!
+        </span>, {
+            position: "bottom-right",
+            autoClose: 5000,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: false,
+            draggable: true,
+            progress: undefined,
+            theme: "dark",
+            pauseOnFocusLoss: false
+        });
+}
+
+export const notifyJobAdEdit = () => {
+    toast.success(
+        <span>
+            Job advertisement updated successfully!
+        </span>, {
+            position: "bottom-right",
+            autoClose: 5000,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: false,
+            draggable: true,
+            progress: undefined,
+            theme: "dark",
+            pauseOnFocusLoss: false
+        });
+}
+
+export const notifyJobAdPost = () => {
+    toast.success(
+        <span>
+            Job advertisement posted successfully!
+        </span>, {
+            position: "bottom-right",
+            autoClose: 5000,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: false,
+            draggable: true,
+            progress: undefined,
+            theme: "dark",
+            pauseOnFocusLoss: false
+        });
+}
+
+export const notifyJobAdDelete = () => {
+    toast.success(
+        <span>
+            Job advertisement deleted successfully!
+        </span>, {
+            position: "bottom-right",
+            autoClose: 5000,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: false,
+            draggable: true,
+            progress: undefined,
+            theme: "dark",
+            pauseOnFocusLoss: false
+        });
+}
+
+export const notifyAppStatusUpdate = () => {
+    toast.success(
+        <span>
+            Status updated successfully!
+        </span>, {
+            position: "bottom-right",
+            autoClose: 5000,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: false,
+            draggable: true,
+            progress: undefined,
+            theme: "dark",
+            pauseOnFocusLoss: false
+        });
+}
+
+export const notifyJobAdApply = () => {
+    toast.success(
+        <span>
+            Your application was successfully sent!
+        </span>, {
+            position: "bottom-right",
+            autoClose: 5000,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: false,
+            draggable: true,
+            progress: undefined,
+            theme: "dark",
+            pauseOnFocusLoss: false
+        });
+}
+
+export const notifyAccessUpdate = (companyName) => {
+    toast.success(
+        <span>
+            {companyName}'s access was successfully changed!
+        </span>, {
+            position: "bottom-right",
+            autoClose: 5000,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: false,
+            draggable: true,
+            progress: undefined,
+            theme: "dark",
+            pauseOnFocusLoss: false
+        });
+}
+
+export const notifyIncorrectEmailOrPassword = () => {
+    toast.error(
+        <span>Incorrect email or password. Please try again.</span>,
+        {
+            position: "bottom-right",
+            autoClose: 5000,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: false,
+            draggable: true,
+            progress: undefined,
+            theme: "dark",
+            pauseOnFocusLoss: false
+        }
+    );
+}
Index: jobvista-frontend/src/utils/utils.js
===================================================================
--- jobvista-frontend/src/utils/utils.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
+++ jobvista-frontend/src/utils/utils.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -7,10 +7,4 @@
 }
 
-export const sortElementsBySubmissionDate = (array) => {
-    return array.slice().sort((a, b) => {
-        return new Date(b).getTime() - new Date(a.postedOn).getTime()
-    });
-}
-
 export const formatRelativeTime = (dateString) => {
     const date = new Date(dateString);
@@ -18,5 +12,4 @@
     const diffTime = now - date;
 
-    // Define time intervals in milliseconds
     const minute = 60 * 1000;
     const hour = minute * 60;
@@ -25,5 +18,4 @@
     const month = day * 30;
 
-    // Calculate the relative time
     if (diffTime < minute) {
         return 'just now';
Index: jobvista-frontend/src/views/admin_panel/AdminPanel.css
===================================================================
--- jobvista-frontend/src/views/admin_panel/AdminPanel.css	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
+++ jobvista-frontend/src/views/admin_panel/AdminPanel.css	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -3,4 +3,11 @@
 }
 
+.table tbody tr:nth-child(even) {
+    background-color: #fff; /* Light gray */
+}
+
+.table tbody tr:nth-child(odd) {
+    background-color: #f2f2f2; /* White */
+}
 /* The switch - the box around the slider */
 .switch {
Index: jobvista-frontend/src/views/admin_panel/AdminPanel.js
===================================================================
--- jobvista-frontend/src/views/admin_panel/AdminPanel.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
+++ jobvista-frontend/src/views/admin_panel/AdminPanel.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -54,5 +54,5 @@
     return (
         <div className="custom-container mt-5">
-            <table className="table table-striped">
+            <table className="table">
                 <thead>
                 <tr>
Index: jobvista-frontend/src/views/applications/ApplicationDetailsModal.js
===================================================================
--- jobvista-frontend/src/views/applications/ApplicationDetailsModal.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
+++ jobvista-frontend/src/views/applications/ApplicationDetailsModal.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -32,16 +32,24 @@
 
     useEffect(() => {
-        if(application) {
-            dispatch(ApplicationActions.downloadResume(application.fileName, (success, response) => {
-                if(success) {
+        if (application) {
+            ApplicationActions.downloadResume(application.id, (success, response) => {
+                if (success) {
                     setResumeUrl(response);
                 }
-            }))
+            })
         }
-    }, [application])
+    }, [])
+
+    function getFileName(path) {
+        let fileName = path.split('\\').pop().split('/').pop();
+
+        fileName = fileName.trim();
+
+        return fileName;
+    }
 
     return (<div className="modal-wrap">
         <button onClick={toggleModal} className="application-button">View application</button>
-        <Modal open={modal} onClose={toggleModal} center >
+        <Modal open={modal} onClose={toggleModal} center>
             <div className="head-modal">
                 <h3>{application.jobSeekerName}'s application for {application.jobAdTitle}</h3>
@@ -49,18 +57,20 @@
             </div>
 
-            <div className="modal-content" >
+            <div className="modal-content">
                 <form>
                     <div className="row">
                         <div className="col-md-6">
                             <label className="label">Why are you interested in joining our company?</label>
-                            <textarea disabled type="text" defaultValue={application.questionAnswers[0]} disabled placeholder="Write your answer here..." className="application-textarea"/>
-
-
+                            <textarea disabled type="text" defaultValue={application.questionAnswers[0]} disabled
+                                      placeholder="Write your answer here..." className="application-textarea"/>
+                            <br/><br/>
                             <label className="label">What makes you a good fit for this position?</label>
-                            <textarea disabled type="text" defaultValue={application.questionAnswers[1]}  placeholder="Write your answer here..." className="application-textarea"/>
-
-
-                            <label className="label">What do you hope to achieve in your first 6 months in this role?</label>
-                            <textarea disabled type="text" defaultValue={application.questionAnswers[2]}  placeholder="Write your answer here..." className="application-textarea"/>
+                            <textarea disabled type="text" defaultValue={application.questionAnswers[1]}
+                                      placeholder="Write your answer here..." className="application-textarea"/>
+                            <br/><br/>
+                            <label className="label">What do you hope to achieve in your first 6 months in this
+                                role?</label>
+                            <textarea disabled type="text" defaultValue={application.questionAnswers[2]}
+                                      placeholder="Write your answer here..." className="application-textarea"/>
 
                         </div>
@@ -68,10 +78,12 @@
                             <label htmlFor="start">Curriculum vitae (CV)</label>
                             <br/>
-                            <a className="resume-link" href={resumeUrl} target="_blank" rel="noopener noreferrer">{application.fileName}</a>
+                            <a className="resume-link" href={resumeUrl} target="_blank"
+                               rel="noopener noreferrer">{getFileName(application.fileName)}</a>
                             <br/>
 
                             <br/>
                             <label className="label">Message to the recruiter</label>
-                            <textarea disabled type="text" defaultValue={application.message} placeholder="Optional..." className="application-textarea"/>
+                            <textarea disabled type="text" defaultValue={application.message} placeholder="Optional..."
+                                      className="application-textarea"/>
 
                         </div>
Index: jobvista-frontend/src/views/applications/Applications.css
===================================================================
--- jobvista-frontend/src/views/applications/Applications.css	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
+++ jobvista-frontend/src/views/applications/Applications.css	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -32,6 +32,6 @@
     padding: 20px 20px;
     display: flex;
-    justify-content: center;
-    gap: 20px;
+    /*justify-content: center;*/
+    /*gap: 20px;*/
     margin: 15px 0;
     /*z-index: -1000;*/
@@ -39,5 +39,6 @@
 .application-card .app-job-seeker-pic {
     border: 1px solid gray;
-    border-radius: 50%
+    border-radius: 50%;
+    margin-right: 20px;
 }
 .application-card .app-job-seeker-pic img {
@@ -45,6 +46,10 @@
 }
 
+.application-card .app-company-logo {
+    width: 8%;
+}
+
 .application-card .app-info {
-    width: 60%;
+    width: 65%;
     display: inline-flex;
     flex-direction: column;
@@ -56,9 +61,12 @@
 .application-card .app-info .jobAd-title {
     font-weight: 600;
+    font-size: 1.2rem;
     /*text-transform: uppercase;*/
     font-family: 'Segoe UI', sans-serif;
-    /*font-size: 22px;*/
+    text-decoration: none;
+    color: black
 }
-.application-card .app-info .jobAd-title
+
+.
 
 .application-card .app-info .contact-info {
@@ -78,5 +86,5 @@
 
 .application-card .app-status {
-    width: 40%;
+    width: 28%;
     display: inline-flex;
     justify-content: end;
Index: jobvista-frontend/src/views/applications/ApplicationsByJobSeeker.js
===================================================================
--- jobvista-frontend/src/views/applications/ApplicationsByJobSeeker.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
+++ jobvista-frontend/src/views/applications/ApplicationsByJobSeeker.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -7,4 +7,5 @@
 import {RecruiterActions} from "../../redux/actions/recruiterActions";
 import {sortElementsBy} from "../../utils/utils";
+import {Link} from "react-router-dom";
 
 export const ApplicationsByJobSeeker = () => {
@@ -97,5 +98,6 @@
 
                     <div className="app-info">
-                        <div className="jobAd-title">{application.jobAdTitle}</div>
+                        <Link to={`/job-advertisements/${application.jobAdId}`} className="jobAd-title">{application.jobAdTitle}</Link>
+                        {/*<h5 className="jobAd-title"></h5>*/}
                         <div className="contact-info">
                             <div className="contact-item">
Index: jobvista-frontend/src/views/applications/ApplyToJobAdModal.js
===================================================================
--- jobvista-frontend/src/views/applications/ApplyToJobAdModal.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
+++ jobvista-frontend/src/views/applications/ApplyToJobAdModal.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -51,6 +51,6 @@
 
             dispatch(ApplicationActions.submitApplication(
-                formData,(success, response) => {
-                    if(success) {
+                formData, (success) => {
+                    if (success) {
                         toggleModal()
                         notifyJobAdApply()
@@ -66,11 +66,11 @@
 
     return (<div className="modal-wrap">
-        {role===Roles.JOBSEEKER &&
+        {role === Roles.JOBSEEKER &&
             <>
-                {jobAd.active && <button onClick={toggleModal} className="apply-button apply">Apply now</button> }
-                {!jobAd.active && <button className="card-button apply disabled">Apply now</button> }
+                {jobAd.active && <button onClick={toggleModal} className="apply-button apply">Apply now</button>}
+                {!jobAd.active && <button className="card-button apply disabled">Apply now</button>}
             </>
         }
-        <Modal open={modal} onClose={toggleModal} center >
+        <Modal open={modal} onClose={toggleModal} center>
             <div className="head-modal">
                 <h3>Applying to {jobAd.title} at {jobAd.recruiterName}</h3>
@@ -78,5 +78,5 @@
             </div>
 
-            <div className="modal-content" >
+            <div className="modal-content">
                 <form onSubmit={handleSubmit(submitApplication)}>
                     <div className="row">
@@ -92,7 +92,8 @@
                             <p style={{color: "red"}}>{errors.answerTwo?.message}</p>
 
-                            <label className="label">What do you hope to achieve in your first 6 months in this role?</label>
-                            <textarea type="text"  placeholder="Write your answer here..."
-                                   {...register("answerThree")} className="application-textarea"/>
+                            <label className="label">What do you hope to achieve in your first 6 months in this
+                                role?</label>
+                            <textarea type="text" placeholder="Write your answer here..."
+                                      {...register("answerThree")} className="application-textarea"/>
                             <p style={{color: "red"}}>{errors.answerThree?.message}</p>
 
@@ -101,5 +102,7 @@
                             <label htmlFor="start">Curriculum vitae (CV)</label>
                             <br/>
-                            <input {...register("file")} className="resume-link" onChange={(e) => setResumeFile(e.target.files[0])} required type="file" id="fileUpload" accept=".pdf"/>
+                            <input {...register("file")} className="resume-link"
+                                   onChange={(e) => setResumeFile(e.target.files[0])} required type="file"
+                                   id="fileUpload" accept=".pdf"/>
 
                             <br/>
@@ -109,5 +112,6 @@
 
                             <br/><br/>
-                            <p style={{color: "red"}}>Please note that your personal data from your account will be used to identify and process your application.</p>
+                            <p style={{color: "red"}}>Please note that your personal data from your account will be used
+                                to identify and process your application.</p>
                         </div>
                     </div>
Index: jobvista-frontend/src/views/auth/SignUpRecruiterForm.js
===================================================================
--- jobvista-frontend/src/views/auth/SignUpRecruiterForm.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
+++ jobvista-frontend/src/views/auth/SignUpRecruiterForm.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -13,5 +13,5 @@
     const schema = yup.object().shape({
         companyNameReg: yup.string().required("Company name is required."),
-        phoneNumberReg: yup.number().required("Phone number is required"),
+        phoneNumberReg: yup.string().required("Phone number is required"),
         companyEmailReg: yup.string().required("Email is required.").email("Email is not valid."),
         passwordReg: yup.string().min(6, "Password must be at least 6 characters.").required("Password is required."),
@@ -32,5 +32,5 @@
                     //     theme: success ? 'success' : 'error'
                     // });
-                    success && navigate("/");
+                    success && navigate("/no-access");
                 }));
         } catch (err) {
Index: jobvista-frontend/src/views/dashboard/Dashboard.js
===================================================================
--- jobvista-frontend/src/views/dashboard/Dashboard.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
+++ jobvista-frontend/src/views/dashboard/Dashboard.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -34,31 +34,4 @@
 
 
-
-    // const [user, setUser] = useState(null);
-    //
-    // useEffect(() => {
-    //     const token = localStorage.getItem(AUTH_TOKEN);
-    //     if (token!=null) {
-    //         try {
-    //             const decodedToken = jwtDecode(token);
-    //             setUser({
-    //                 name: decodedToken.name,
-    //                 role: decodedToken.role,
-    //                 hasAccess: decodedToken.access,
-    //             });
-    //         } catch (error) {
-    //             console.error('Failed to decode token', error);
-    //         }
-    //     }
-    //     console.log(user)
-    // }, [auth]);
-
-    // useEffect(() => {
-    //     if (auth) {
-    //         setRole(auth.role);
-    //     }
-    //     console.log(props)
-    // }, [auth]);
-
     useEffect(() => {
         if (!jobDispatched && jobAdvertisementsState.length == 0) {
@@ -72,5 +45,5 @@
 
         } else {
-            setJobAdvertisements(jobAdvertisementsState)
+            setJobAdvertisements(sortElementsBy(jobAdvertisementsState, "postedOn"))
             console.log("Fetch all job advertisements STATE")
 
@@ -160,5 +133,5 @@
                     jobAdvertisements.map((jobAd, index) => (
                         <div key={index} className="col">
-                            <div className="custom-card">
+                            <div className="custom-card dashboard-card">
                                 <div className="card-head">
                                     <span className="hourly-salary"><b>${jobAd.startingSalary}/hr</b></span>
@@ -187,9 +160,8 @@
                                     </div>
 
-                                    <div className="aligned">
-                                        <Link to={`/job-advertisements/${jobAd.id}`} className="card-button">Read
-                                            more</Link>
-                                    </div>
-
+                                </div>
+                                <div className="card-foot">
+                                    <Link to={`/job-advertisements/${jobAd.id}`} className="card-button">Read
+                                        more</Link>
                                 </div>
                             </div>
Index: jobvista-frontend/src/views/job_advertisements/AddJobAdModal.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/AddJobAdModal.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
+++ jobvista-frontend/src/views/job_advertisements/AddJobAdModal.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -43,5 +43,4 @@
 
     const addJobAdvertisement = async (values) => {
-        //const description = values.description.replace(/\n/g, "\\n");
         try {
             dispatch(JobAdvertisementActions.addJobAdvertisement(
@@ -55,7 +54,6 @@
                     jobType: values.jobType.value,
                     employmentStatus: values.employmentStatus.value,
-                }, (success, response) => {
+                }, (success) => {
                     if (success) {
-                        // console.log("Job Advertisement added")
                         toggleModal()
                         notifyJobAdPost()
Index: jobvista-frontend/src/views/job_advertisements/DeleteJobAdModal.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/DeleteJobAdModal.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
+++ jobvista-frontend/src/views/job_advertisements/DeleteJobAdModal.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -26,9 +26,8 @@
     };
 
-    const addJobAdvertisement = async () => {
+    const deleteJobAdvertisement = async () => {
         try {
-            dispatch(JobAdvertisementActions.deleteJobAdvertisement(jobAd.props.id, (success, response) => {
+            dispatch(JobAdvertisementActions.deleteJobAdvertisement(jobAd.props.id, (success) => {
                 if (success) {
-                    // console.log("Job Advertisement deleted")
                     toggleModal()
                     notifyJobAdDelete()
@@ -54,5 +53,5 @@
                 <div className="modal-delete-buttons">
                     <button className="cancel-btn" onClick={toggleModal}>Cancel</button>
-                    <button className="delete-btn" onClick={addJobAdvertisement}> Delete</button>
+                    <button className="delete-btn" onClick={deleteJobAdvertisement}> Delete</button>
                 </div>
             </div>
Index: jobvista-frontend/src/views/job_advertisements/EditJobAdModal.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/EditJobAdModal.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
+++ jobvista-frontend/src/views/job_advertisements/EditJobAdModal.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -54,7 +54,6 @@
                     jobType: values.jobType.value,
                     employmentStatus: values.employmentStatus.value,
-                }, jobAd.props.id, (success, response) => {
+                }, jobAd.props.id, (success) => {
                     if(success) {
-                        // console.log("Job Advertisement edited")
                         toggleModal()
                         notifyJobAdEdit()
Index: jobvista-frontend/src/views/job_advertisements/JobAdDetails.css
===================================================================
--- jobvista-frontend/src/views/job_advertisements/JobAdDetails.css	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
+++ jobvista-frontend/src/views/job_advertisements/JobAdDetails.css	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -20,4 +20,8 @@
     /*scrollbar-width: thin; !* "auto" hides scrollbar on some browsers, "thin" shows a thin scrollbar *!*/
     /*scrollbar-color: #999999 #fff;*/
+}
+
+.min-wrap {
+    min-height: 80vh;
 }
 
Index: jobvista-frontend/src/views/job_advertisements/JobAdDetails.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/JobAdDetails.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
+++ jobvista-frontend/src/views/job_advertisements/JobAdDetails.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -63,5 +63,5 @@
         <div className="row">
             <div className="col-md-9">
-                <div className="details-wrap">
+                <div className="details-wrap min-wrap">
                     <div className="row">
                         <div className="col-md-9">
Index: jobvista-frontend/src/views/job_advertisements/JobManagementHub.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/JobManagementHub.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
+++ jobvista-frontend/src/views/job_advertisements/JobManagementHub.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -0,0 +1,166 @@
+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(auth.id, {
+            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 hub-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>
+
+
+                            <div className="card-foot">
+                                <Link to={`/job-management-hub/applications/${jobAd.id}`}
+                                      className="card-button">View applications</Link>
+                            </div>
+                        </div>
+                    </div>))}
+            </div>
+        </div>
+
+
+    )
+}
Index: jobvista-frontend/src/views/job_advertisements/RecruiterWorkspace.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/RecruiterWorkspace.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
+++ 	(revision )
@@ -1,165 +1,0 @@
-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>
-
-
-    )
-}
Index: jobvista-frontend/src/views/profiles/JobSeekerEditProfile.css
===================================================================
--- jobvista-frontend/src/views/profiles/JobSeekerEditProfile.css	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
+++ jobvista-frontend/src/views/profiles/JobSeekerEditProfile.css	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -0,0 +1,22 @@
+.profile-pic {
+    position: absolute;
+    border-radius: 100px;
+    border: 5px solid rgb(243, 242, 241);
+    bottom: -110px;
+    left: 70px;
+    object-fit: contain;
+}
+
+/*.floating-wrap {*/
+/*    position: relative;*/
+/*}*/
+
+/*.floating-wrap h5 {*/
+/*    z-index: 100;*/
+/*    position: absolute;*/
+/*    top: -25px;*/
+/*    left: 20px;*/
+/*    padding: 5px 10px;*/
+/*    background: white;*/
+/*    border-radius: 10px;*/
+/*}*/
Index: jobvista-frontend/src/views/profiles/JobSeekerEditProfile.js
===================================================================
--- jobvista-frontend/src/views/profiles/JobSeekerEditProfile.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
+++ jobvista-frontend/src/views/profiles/JobSeekerEditProfile.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -0,0 +1,252 @@
+import React, {useEffect, useState} from "react";
+
+import "../shared_css/Modal.css"
+
+import 'react-responsive-modal/styles.css';
+import "./JobSeekerEditProfile.css"
+
+//Validation
+import * as yup from "yup";
+import {yupResolver} from "@hookform/resolvers/yup";
+import {Controller, useForm} from "react-hook-form";
+
+import {useDispatch, useSelector} from "react-redux";
+import {JobSeekerActions} from "../../redux/actions/JobSeekerActions";
+import {notifyProfileEdit, notifyProfilePicChange} from "../../utils/toastUtils";
+
+
+export const JobSeekerEditProfile = (props) => {
+
+    const dispatch = useDispatch();
+    const auth = useSelector(state => state.auth.currentUser)
+
+    const [seekerDetails, setSeekerDetails] = useState(null);
+
+    const [profilePicFile, setProfilePicFile] = useState(null);
+
+    let profilePicState = useSelector(state => state.images.profilePictures);
+
+    const [profilePicPreview, setProfilePicPreview] = useState(null);
+    const [profilePicView, setProfilePicView] = useState(null);
+
+
+    useEffect(() => {
+        if(auth) {
+            dispatch(JobSeekerActions.fetchJobSeekerEditDetailsById(auth.id, (success, response) => {
+                if(success) {
+                    setSeekerDetails(response.data);
+                    console.log(response.data)
+                }
+            }))
+        }
+    }, [auth])
+
+    useEffect(() => {
+        if (auth.id) {
+            if(!profilePicState[auth.id]) {
+                dispatch(JobSeekerActions.downloadProfilePic(auth.id, (success, response) => {
+                    if (success) {
+                        setProfilePicView(response)
+                        //setDispatched(true)
+                    }
+                }))
+                //console.log("LOGO FETCH")
+            } else {
+                setProfilePicView(profilePicState[auth.id])
+                //console.log("LOGO STATE")
+            }
+
+        }
+
+    }, [auth])
+    const schema = yup.object().shape({
+        email: yup.string().required("Please enter your email"),
+        firstName: yup.string().required("Please enter your first name"),
+        lastName: yup.string().required("Please enter your last name"),
+        phoneNumber: yup.string().required("Please enter your phone number"),
+
+    })
+
+
+
+    const {register, handleSubmit, formState: {errors}} = useForm({
+        resolver: yupResolver(schema),
+    });
+
+    const editJobSeekerDetails = async (values) => {
+        try {
+            dispatch(JobSeekerActions.editJobSeekerDetailsById(
+                {
+                    email: values.email,
+                    firstName: values.firstName,
+                    lastName: values.lastName,
+                    phoneNumber: values.phoneNumber,
+
+
+                }, auth.id, (success, response) => {
+                    if (success) {
+                        // console.log("Recruiter details edited")
+                        notifyProfileEdit()
+                        setSeekerDetails(response.data)
+                    }
+                }
+            ))
+        } catch (err) {
+            console.error(err)
+        }
+    }
+
+    const handleButtonClick = () => {
+        document.getElementById('logo-upload-input').click();
+    };
+    const handleLogoChange = (event) => {
+        const file = event.target.files[0];
+        if (file && (file.type === 'image/png' || file.type === 'image/jpeg')) {
+            setProfilePicFile(file)
+            setProfilePicPreview(URL.createObjectURL(file));
+        }
+        event.target.value = null;
+    };
+    const handleLogoUpload = async () => {
+        try {
+            const formData = new FormData();
+            formData.append("jobSeekerId", auth.id);
+            formData.append("profilePicFile", profilePicFile);
+
+            dispatch(JobSeekerActions.submitProfilePic(formData, (success, response) => {
+                if (success) {
+                    // window.location.reload(); // MAYBE REMOVE
+                    // console.log("Logo uploaded successfully")
+                    notifyProfilePicChange()
+                    setProfilePicPreview(null)
+                    setProfilePicView(URL.createObjectURL(profilePicFile))
+
+                }
+            }))
+
+        } catch (error) {
+            console.error(error)
+        }
+    }
+
+    const handleCancelUpload = () => {
+        setProfilePicFile(null)
+        setProfilePicPreview(null)
+    }
+
+
+    return (<div className="custom-container no-additional-margin">
+
+        {profilePicPreview && (
+            <div className="confirmation-bar">
+                <div className="confirmation-bar-buttons">
+                    <button className="cancel-changes" onClick={handleCancelUpload}>Cancel</button>
+                    <button className="save-changes" onClick={handleLogoUpload}>Save changes</button>
+
+                </div>
+            </div>
+        )}
+        <div className="photo-box">
+            <div>
+                <img
+                    src="/images/mountains.png"
+                    className="company-banner"
+                    alt="Company Banner"
+                />
+                {profilePicPreview ? <>
+                    <img
+                        src={profilePicPreview}
+                        className="profile-pic"
+                        alt=""
+                        width={200} height={200}
+                    />
+                </> : <>
+                    <img
+                        // loading gif
+                        src={profilePicView}
+                        className="profile-pic"
+                        alt=""
+                        width={200} height={200}
+                    />
+                </>}
+
+            </div>
+
+            <div className="info-tab">
+                {seekerDetails &&  <h3>{seekerDetails.firstName + " " + seekerDetails.lastName}</h3>}
+                {/*<p>Active job listings: <span>{activeJobListingsCount}</span></p>*/}
+            </div>
+
+            <div className="edit-buttons">
+
+                <input
+                    type="file"
+                    id="logo-upload-input"
+                    accept="image/png, image/jpeg"
+                    onChange={handleLogoChange}
+                    style={{display: 'none'}}
+                />
+                <button onClick={handleButtonClick}>
+                    <i className="fa-solid fa-camera"></i> Change profile picture
+                </button>
+                <button><i className="fa-solid fa-panorama"></i> Change cover photo</button>
+            </div>
+
+        </div>
+
+
+
+        {seekerDetails &&
+            <>
+                <div className="floating-wrap">
+                    <h5>Personal details</h5>
+                    <form onSubmit={handleSubmit(editJobSeekerDetails)}>
+                        <div className="row">
+                            <div className="col-md-12">
+
+
+                                <div className="form-floating mb-3">
+                                    <input type="text" className="form-control" defaultValue={seekerDetails.email}  {...register("email")}
+                                           placeholder="David"/>
+                                    <label htmlFor="floatingFirstName">Email address</label>
+                                    <p className="error-message">{errors.email?.message}</p>
+                                </div>
+
+                                <div className="form-floating mb-3">
+                                    <input type="text" className="form-control" defaultValue={seekerDetails.firstName}  {...register("firstName")}
+                                           placeholder="David"/>
+                                    <label htmlFor="floatingFirstName">First name</label>
+                                    <p className="error-message">{errors.firstName?.message}</p>
+                                </div>
+
+                                <div className="form-floating mb-3">
+                                    <input type="text" className="form-control" defaultValue={seekerDetails.lastName} {...register("lastName")}
+                                           placeholder="David"/>
+                                    <label htmlFor="floatingFirstName">Last name</label>
+                                    <p className="error-message">{errors.lastName?.message}</p>
+                                </div>
+
+
+                                <div className="form-floating mb-3">
+                                    <input type="text" className="form-control" defaultValue={seekerDetails.phoneNumber}  {...register("phoneNumber")}
+                                           placeholder="David"/>
+                                    <label htmlFor="floatingFirstName">Phone number</label>
+                                    <p className="error-message">{errors.phoneNumber?.message}</p>
+                                </div>
+
+
+                            </div>
+                        </div>
+
+                        <div className="d-flex justify-content-end">
+                            <button className="blue-submit-button" type="submit"> Save changes</button>
+                        </div>
+
+                    </form>
+                </div>
+            </>
+        }
+
+
+    </div>)
+}
Index: jobvista-frontend/src/views/profiles/RecruiterEditProfile.js
===================================================================
--- jobvista-frontend/src/views/profiles/RecruiterEditProfile.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
+++ jobvista-frontend/src/views/profiles/RecruiterEditProfile.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -0,0 +1,251 @@
+import {useDispatch, useSelector} from "react-redux";
+import React, {useEffect, useState} from "react";
+import {RecruiterActions} from "../../redux/actions/recruiterActions";
+import * as yup from "yup";
+import {useForm} from "react-hook-form";
+import {yupResolver} from "@hookform/resolvers/yup";
+
+// Toast notification
+import 'react-toastify/dist/ReactToastify.css';
+import { toast, ToastContainer } from 'react-toastify';
+import {notifyLogoChange, notifyProfileEdit} from "../../utils/toastUtils";
+export const RecruiterEditProfile = () => {
+
+    const dispatch = useDispatch();
+    const auth = useSelector(state => (state.auth.currentUser))
+
+    const [recruiterDetails, setRecruiterDetails] = useState(null);
+
+    let logosState = useSelector(state => state.images.logos)
+    const [logoDispatched, setLogoDispatched] = useState(false)
+    const [logoFile, setLogoFile] = useState(null);
+    const [logoPreview, setLogoPreview] = useState(null);
+    const [logoView, setLogoView] = useState(null);
+
+
+    useEffect(() => {
+        if (auth) {
+            dispatch(RecruiterActions.fetchRecruiterEditDetailsById(auth.id, (success, response) => {
+                if (success) {
+                    setRecruiterDetails(response.data)
+                }
+            }))
+        }
+    }, [auth]);
+
+    useEffect(() => {
+        if (auth.id) {
+            if (!logoDispatched && !logosState[auth.id]) {
+                dispatch(RecruiterActions.downloadLogo(auth.id, (success, response) => {
+                    if (success) {
+                        setLogoView(response)
+                        setLogoDispatched(true)
+                    }
+                }))
+                console.log("LOGO GET")
+            } else {
+                setLogoView(logosState[auth.id])
+                console.log("LOGO STATE")
+            }
+        }
+
+    }, [auth])
+
+    const schema = yup.object().shape({
+        email: yup.string().required("Please enter your email"),
+        companyName: yup.string().required("Please enter your company name"),
+        companyDescription: yup.string(),
+        contactEmail: yup.string().required("Please enter your contact email"),
+        contactPhoneNumber: yup.string().required("Please enter your contact phone number"),
+        receptionist: yup.string(),
+    })
+
+    const {register, handleSubmit, control, formState: {errors}} = useForm({
+        resolver: yupResolver(schema),
+    });
+
+
+    const editRecruiterDetails = async (values) => {
+        try {
+            dispatch(RecruiterActions.editRecruiterDetailsById(
+                {
+                    email: values.email,
+                    companyName: values.companyName,
+                    companyDescription: values.companyDescription,
+                    contactEmail: values.contactEmail,
+                    contactPhoneNumber: values.contactPhoneNumber,
+                    receptionist: values.receptionist,
+
+                }, auth.id, (success, response) => {
+                    if (success) {
+                        console.log("Recruiter details edited")
+                        notifyProfileEdit()
+                        //window.location.reload();
+                    }
+                }
+            ))
+        } catch (err) {
+            console.error(err)
+        }
+    }
+
+    const handleButtonClick = () => {
+        document.getElementById('logo-upload-input').click();
+    };
+    const handleLogoChange = (event) => {
+        const file = event.target.files[0];
+        if (file && (file.type === 'image/png' || file.type === 'image/jpeg')) {
+            setLogoFile(file);
+            setLogoPreview(URL.createObjectURL(file));
+        }
+        event.target.value = null;
+    };
+
+    const handleLogoUpload = async () => {
+        try {
+            const formData = new FormData();
+            formData.append("recruiterId", auth.id);
+            formData.append("logoFile", logoFile);
+
+            dispatch(RecruiterActions.submitLogo(formData, (success, response) => {
+                if (success) {
+                    //console.log("Logo uploaded successfully")
+                    notifyLogoChange()
+                    setLogoPreview(null)
+                    setLogoView(URL.createObjectURL(logoFile))
+                }
+            }))
+
+        } catch (error) {
+            console.error(error)
+        }
+    }
+
+    const handleCancelUpload = () => {
+        setLogoFile(null)
+        setLogoPreview(null)
+        console.log(logoPreview)
+    }
+
+    return (<div className="my-workspace">
+            {logoPreview && (
+                <div className="confirmation-bar">
+                    <div className="confirmation-bar-buttons">
+                        <button className="cancel-changes" onClick={handleCancelUpload}>Cancel</button>
+                        <button className="save-changes" onClick={handleLogoUpload}>Save changes</button>
+
+                    </div>
+                </div>
+            )}
+
+            <div className="custom-container no-additional-margin">
+                <div className="photo-box">
+                    <div>
+                        <img
+                            src="/images/default-company-banner.jpg"
+                            className="company-banner"
+                            alt="Company Banner"
+                        />
+                        {logoPreview ? <>
+                            <img
+                                src={logoPreview}
+                                className="company-logo"
+                                alt=""
+                                width={200} height={200}
+                            />
+                        </> : <>
+                            <img
+                                // loading gif
+                                src={logoView}
+                                className="company-logo"
+                                alt=""
+                                width={200} height={200}
+                            />
+                        </>}
+                    </div>
+
+                    <div className="info-tab">
+                        <h3>{recruiterDetails && recruiterDetails.companyName}</h3>
+                    </div>
+
+                    <div className="edit-buttons">
+                        <input
+                            type="file"
+                            id="logo-upload-input"
+                            accept="image/png, image/jpeg"
+                            onChange={handleLogoChange}
+                            style={{display: 'none'}}
+                        />
+                        <button onClick={handleButtonClick}>
+                            <i className="fa-solid fa-camera"></i> Change logo
+                        </button>
+                        <button><i className="fa-solid fa-panorama"></i> Change cover photo</button>
+                    </div>
+
+                </div>
+
+
+                {/*<i className="fa-solid fa-circle-exclamation">*/}
+                {recruiterDetails && (
+                    <div className="floating-wrap">
+                        <h5>Company details</h5>
+                        <form onSubmit={handleSubmit(editRecruiterDetails)}>
+                            <div className="row">
+                                <div className="col-md-6">
+                                    <div className="form-floating mb-3">
+                                        <input type="text" className="form-control" defaultValue={recruiterDetails.email} {...register("email")}
+                                               placeholder="David"/>
+                                        <label htmlFor="floatingFirstName">Email address</label>
+                                        <p className="error-message">{errors.email?.message}</p>
+                                    </div>
+
+                                    <div className="form-floating mb-3">
+                                        <input type="text" className="form-control" defaultValue={recruiterDetails.contactEmail} {...register("contactEmail")}
+                                               placeholder="David"/>
+                                        <label htmlFor="floatingFirstName">Contact email address</label>
+                                        <p className="error-message">{errors.contactEmail?.message}</p>
+                                    </div>
+
+
+                                    <div className="form-floating mb-3">
+                                        <input type="text" className="form-control" defaultValue={recruiterDetails.contactPhoneNumber} {...register("contactPhoneNumber")}
+                                               placeholder="David"/>
+                                        <label htmlFor="floatingFirstName">Contact phone number</label>
+                                        <p className="error-message">{errors.contactPhoneNumber?.message}</p>
+                                    </div>
+
+                                    <div className="form-floating mb-3">
+                                        <input type="text" className="form-control" defaultValue={recruiterDetails.receptionist} {...register("receptionist")}
+                                               placeholder="David"/>
+                                        <label htmlFor="floatingFirstName">Receptionist</label>
+                                        <p className="error-message">{errors.receptionist?.message}</p>
+                                    </div>
+                                </div>
+                                <div className="col-md-6">
+                                    <div className="form-floating mb-3">
+                                        <input type="text" className="form-control" defaultValue={recruiterDetails.companyName} {...register("companyName")}
+                                               placeholder="David"/>
+                                        <label htmlFor="floatingCompanyName">Company name</label>
+                                        <p className="error-message">{errors.companyName?.message}</p>
+                                    </div>
+
+                                    <div className="form-floating mb-3">
+                                <textarea placeholder="Company description" defaultValue={recruiterDetails.companyDescription} className="form-control custom-text-area"
+                                          name="" id="" cols="30" rows="9" {...register("companyDescription")}></textarea>
+                                        <label htmlFor="floatingCompanyName">Company description</label>
+                                    </div>
+
+                                </div>
+                            </div>
+                            <div className="d-flex justify-content-end">
+                                <button className="blue-submit-button" type="submit">Save changes</button>
+                            </div>
+                        </form>
+                    </div>
+                )}
+                {/*<div className="line-separator"></div>*/}
+            </div>
+        </div>
+
+    )
+}
Index: jobvista-frontend/src/views/profiles/RecruiterProfile.js
===================================================================
--- jobvista-frontend/src/views/profiles/RecruiterProfile.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
+++ jobvista-frontend/src/views/profiles/RecruiterProfile.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -0,0 +1,193 @@
+import "../job_advertisements/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 {Link} from "react-router-dom";
+import JobType from "../../enumerations/JobType";
+import {RecruiterActions} from "../../redux/actions/recruiterActions";
+
+import {useParams} from "react-router";
+
+
+export const RecruiterProfile = () => {
+
+    const dispatch = useDispatch();
+    const {id} = useParams();
+    const auth = useSelector(state => (state.auth.currentUser))
+
+    const [jobAdvertisementsByRecruiter, setJobAdvertisementsByRecruiter] = useState([]);
+    const [recruiterDetails, setRecruiterDetails] = useState(null);
+
+    let logosState = useSelector(state => state.images.logos)
+    const [logoDispatched, setLogoDispatched] = useState(false)
+    const [logoView, setLogoView] = useState(null);
+
+    const [activeJobListingsCount, setActiveJobListingsCount] = useState(0);
+
+
+    useEffect(() => {
+
+        JobAdvertisementActions.fetchRecruiterDetailsById(id, (success, response) => {
+            if (success) {
+                setRecruiterDetails(response.data)
+            }
+        })
+
+    }, []);
+
+    useEffect(() => {
+        if (id) {
+            if (!logoDispatched && !logosState[id]) {
+                dispatch(RecruiterActions.downloadLogo(id, (success, response) => {
+                    if (success) {
+                        setLogoView(response)
+                        setLogoDispatched(true)
+                    }
+                }))
+            } else {
+                setLogoView(logosState[id])
+            }
+        }
+
+    }, [auth])
+
+    useEffect(() => {
+
+        dispatch(JobAdvertisementActions.fetchJobAdvertisementsByRecruiterProfile(id, (success, response) => {
+            if (success && response.data.length > 0) {
+                setJobAdvertisementsByRecruiter(sortElementsBy(response.data, "postedOn"))
+                setActiveJobListingsCount(countActiveJobListings(response.data));
+            }
+        }))
+    }, [])
+
+
+    function countActiveJobListings(jobAds) {
+        if (jobAds.length > 0) {
+            const activeJobListings = jobAds.filter(job => job.active)
+            return activeJobListings.length;
+        }
+        return 0;
+    }
+
+
+    return (<div className="my-workspace">
+            <div className="custom-container no-additional-margin">
+                <div className="photo-box">
+                    <div>
+                        <img
+                            src="/images/default-company-banner.jpg"
+                            className="company-banner"
+                            alt="Company Banner"
+                        />
+                        <img
+                            // loading gif
+                            src={logoView}
+                            className="company-logo"
+                            alt=""
+                            width={200} height={200}
+                        />
+
+                    </div>
+
+                    <div className="info-tab">
+                        <h3>{recruiterDetails && recruiterDetails.companyName}</h3>
+                        <p>Active job listings: <span>{activeJobListingsCount}</span></p>
+                    </div>
+                </div>
+
+                {recruiterDetails &&
+                    <>
+                        <div className="details-wrap-profile">
+                            <h4>About the company</h4>
+                            <p>{recruiterDetails.companyDescription ?
+                                recruiterDetails.companyDescription : "There is no info about this company yet."
+                            }</p>
+                            <p>
+                                <span> <i
+                                    className="fa-solid fa-envelope"></i> {recruiterDetails.contactEmail}</span> • <span>
+                                <i className="fa-solid fa-phone"></i> {recruiterDetails.contactPhoneNumber}</span>
+                                {recruiterDetails.receptionist && <span> • <i
+                                    className="fa-solid fa-user-tie"></i> {recruiterDetails.receptionist}</span>}
+                            </p>
+                        </div>
+                    </>
+                }
+
+                {/*<div className="line-separator"></div>*/}
+
+                {/*<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">
+
+                    {jobAdvertisementsByRecruiter && jobAdvertisementsByRecruiter.map((jobAd, index) => (
+                        <div key={index} className="col">
+                            <div className="custom-card hub-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>
+                                <div className="card-foot">
+                                    <Link to={`/job-advertisements/${jobAd.id}`} className="card-button">Read
+                                        more</Link>
+                                </div>
+                            </div>
+                        </div>))}
+
+                </div>
+
+
+            </div>
+        </div>
+
+    )
+}
Index: jobvista-frontend/src/views/shared_css/Modal.css
===================================================================
--- jobvista-frontend/src/views/shared_css/Modal.css	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
+++ jobvista-frontend/src/views/shared_css/Modal.css	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -89,4 +89,5 @@
 .application-textarea {
     height: 100px;
+    /*margin-bottom: 20px;*/
 }
 
Index: jobvista-frontend/src/views/shared_css/Random.css
===================================================================
--- jobvista-frontend/src/views/shared_css/Random.css	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
+++ jobvista-frontend/src/views/shared_css/Random.css	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -0,0 +1,65 @@
+.blue-submit-button {
+    font-size: 1rem;
+    padding: 5px 17px;
+    border-radius: 8px;
+    background-color: #06367a;
+    border: none;
+    color: white;
+    font-weight: 500;
+    transition: background-color 0.3s ease;
+}
+
+.blue-submit-button:hover {
+    background-color: #2e579b;
+}
+
+/*FILTER CONTAINER*/
+
+.filter-container {
+    height: 10%;
+    width: 100%;
+    background-color: #fff;
+    border-radius: 12px;
+    padding: 15px 20px;
+    margin-bottom: 20px;
+    margin-top: 30px;
+    height: auto;
+}
+
+.filter-container .filter-box {
+    display: inline-flex;
+    justify-content: center;
+    gap: 10px;
+}
+
+
+.filter-container .search-container {
+    position: relative;
+    /*float: left;*/
+    display: inline-block;
+}
+.filter-container .search-container .search-input {
+    width: 400px;
+    display: inline;
+    padding: 5px 30px;
+    border-radius: 10px;
+    border: 1px solid lightgrey;
+    /*margin-right: 15px;*/
+}
+
+.filter-container .search-container .search-input:focus {
+    outline-color: #2684ff;
+}
+
+.filter-container .search-container i {
+    left: 10px;
+    position: absolute;
+    top: 10px;
+}
+
+.filter-container .item {
+    width: 20%;
+    display: inline-block;
+    /*margin-left: 10px;*/
+    /*float: left !important;*/
+}
Index: jobvista-frontend/src/views/static/AboutUs.css
===================================================================
--- jobvista-frontend/src/views/static/AboutUs.css	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
+++ jobvista-frontend/src/views/static/AboutUs.css	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -0,0 +1,47 @@
+.about-wrap {
+    margin-top: 30px;
+}
+
+.floating-wrap h3 {
+    font-family: Segoe UI;
+    text-align: center;
+}
+.floating-wrap h4 {
+    text-align: center;
+}
+
+.floating-wrap h2 {
+    font-family: Cairo;
+    font-weight: bold;
+}
+.floating-wrap p {
+    font-family: Ubuntu
+}
+.floating-wrap {
+    background-color:white;
+    padding: 15px 20px;
+    border-radius: 15px;
+    margin-bottom: 20px;
+}
+
+.floating-inside-wrap {
+    background-color: rgb(243, 242, 241);
+    padding: 15px 20px;
+    border-radius: 15px;
+    margin: 10px;
+}
+
+.about-us-img {
+    margin-bottom: 20px;
+    border-radius: 15px;
+    width: 100%;
+    padding: 0;
+}
+
+.start-title {
+    font-weight: bold;
+    font-size: 20px;
+    font-family: Segoe UI;
+    text-transform: uppercase;
+
+}
Index: jobvista-frontend/src/views/static/AboutUs.js
===================================================================
--- jobvista-frontend/src/views/static/AboutUs.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
+++ jobvista-frontend/src/views/static/AboutUs.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -0,0 +1,92 @@
+import "./AboutUs.css"
+export const AboutUs = () => {
+
+    return (
+        <div className="container">
+            <div className="about-wrap">
+                <div className="row">
+                    <div className="col-md-6">
+                        <div className="floating-wrap">
+                            <h4>Your Future, Our Mission</h4>
+                            <p>
+                                At Job Vista, we believe that finding the right job should be simple, efficient, and rewarding. Our mission is to connect talented individuals with their dream careers while helping companies discover the best candidates to join their teams.
+                            </p>
+
+
+                        </div>
+                        <div className="floating-wrap">
+                             <h4>How It Started</h4>
+                            <p>
+                                Founded in 2024, Job Vista was born out of a passion for transforming the job search experience. The idea for Job Vista originated as a university project, where a group of us noticed that the job market was becoming increasingly complex, with both job seekers and employers facing numerous challenges in finding the perfect match. Inspired by the potential to make a real difference, we decided to turn our project into a full-fledged platform. Our goal was to create an app that simplifies this process, making it easier for everyone involved.
+                            </p>
+
+                            <h4>What We Offer</h4>
+
+                            <p><span className="start-title">Job Seekers </span>
+                                can browse through thousands of job opportunities from various industries, all in one place. Enjoy an easy application process where you can apply for jobs with just a few clicks and track your applications seamlessly. Receive personalized job alerts about openings that match your skills and interests. Additionally, access a wealth of career resources, including articles, tips, and tools to help you prepare for interviews, improve your resume, and advance your career.</p>
+                            <p>
+                                <span className="start-title">Recruiters </span>
+                                can post job openings and manage applications with our user-friendly interface, ensuring efficient recruitment. Find the best talent using our advanced search and filtering tools to discover candidates that fit your requirements. Enhance your brand visibility by showcasing your company and attracting top talent with a detailed company profile.
+                            </p>
+
+                            {/*<h4>*/}
+                            {/*    Our Vision*/}
+                            {/*</h4>*/}
+                            {/*<p>*/}
+                            {/*    We envision a world where job seekers and employers can effortlessly connect, leading to fulfilling careers and successful businesses. By leveraging technology and innovation, Job Vista aims to be the go-to platform for job hunting and recruitment.*/}
+                            {/*</p>*/}
+                        </div>
+                    </div>
+                    <div className="col-md-6">
+
+
+                        <div className="row">
+                            <img className="about-us-img" src="/images/about-us.jpg" alt=""/>
+                        </div>
+                        <div className="row">
+                            <div className="floating-wrap">
+                                {/*<h4>*/}
+                                {/*    Join Us*/}
+                                {/*</h4>*/}
+
+                                {/*<p>*/}
+                                {/*    Whether you're looking for your next job opportunity or searching for the perfect candidate, Job Vista is here to support you every step of the way. Join our community today and take the next step towards a brighter future.*/}
+                                {/*</p>*/}
+                                <div className="row">
+                                    <div className="col-md-6">
+                                        <div className="floating-inside-wrap">
+                                            <h2>120</h2>
+                                            <p>Total Recruiters</p>
+                                        </div>
+                                    </div>
+                                    <div className="col-md-6">
+                                        <div className="floating-inside-wrap">
+                                            <h2>2400+</h2>
+                                            <p>Total Job Seekers</p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="row">
+                                    <div className="col-md-6">
+                                        <div className="floating-inside-wrap">
+                                            <h2>240</h2>
+                                            <p>Total Job Listings</p>
+                                        </div>
+                                    </div>
+                                    <div className="col-md-6">
+                                        <div className="floating-inside-wrap">
+                                            <h2>4000+</h2>
+                                            <p>Total Applications</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+
+        </div>
+    )
+}
Index: jobvista-frontend/src/views/static/Header.css
===================================================================
--- jobvista-frontend/src/views/static/Header.css	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
+++ jobvista-frontend/src/views/static/Header.css	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -19,5 +19,5 @@
 
 .navbar {
-    width: calc(100% - 17px);
+    width: 100%;
     height: 80px;
     background-color: #f8f9fa;
Index: jobvista-frontend/src/views/static/Loading.css
===================================================================
--- jobvista-frontend/src/views/static/Loading.css	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
+++ jobvista-frontend/src/views/static/Loading.css	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -0,0 +1,34 @@
+
+.loading-container {
+    display: flex;
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    background-color: #f8f9fa;
+}
+
+.loading-logo {
+    width: 85px;
+    height: 85px;
+    display: inline-block;
+    background: url("../../../public/images/logo.png") no-repeat center center;
+    background-size: contain;
+
+}
+
+.loading-brand-name {
+    width: 275px;
+    height: 175px;
+    display: inline-block;
+    background: url("../../../public/images/brand-name-2.png") no-repeat center center;
+    background-size: contain;
+}
+
+.loading-signature {
+    width: 275px;
+    height: 175px;
+    display: inline-block;
+    background: url("../../../public/images/signature.png") no-repeat center center;
+    background-size: contain;
+}
Index: jobvista-frontend/src/views/static/Loading.js
===================================================================
--- jobvista-frontend/src/views/static/Loading.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
+++ jobvista-frontend/src/views/static/Loading.js	(revision 08f82ec612b1b125feec3dcd5c8c0f1062f09e18)
@@ -0,0 +1,12 @@
+import "./Loading.css"
+
+export const Loading = () => {
+    return (
+        <div className="loading-container">
+            <div className="loading-logo"></div>
+            <div className="loading-brand-name"></div>
+
+            {/*<div className="loading-signature"></div>*/}
+        </div>
+    )
+}
