Index: jobvista-frontend/package-lock.json
===================================================================
--- jobvista-frontend/package-lock.json	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/package-lock.json	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -32,4 +32,5 @@
         "react-scripts": "5.0.1",
         "react-select": "^5.8.0",
+        "react-toastify": "^10.0.5",
         "redux": "^5.0.1",
         "redux-thunk": "^3.1.0",
@@ -16027,4 +16028,16 @@
       }
     },
+    "node_modules/react-toastify": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",
+      "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==",
+      "dependencies": {
+        "clsx": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
Index: jobvista-frontend/package.json
===================================================================
--- jobvista-frontend/package.json	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/package.json	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -27,4 +27,5 @@
     "react-scripts": "5.0.1",
     "react-select": "^5.8.0",
+    "react-toastify": "^10.0.5",
     "redux": "^5.0.1",
     "redux-thunk": "^3.1.0",
Index: jobvista-frontend/src/App.css
===================================================================
--- jobvista-frontend/src/App.css	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/App.css	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -2,7 +2,20 @@
 @import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
 
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
 .App {
-  background-color: rgb(243, 242, 241);
-  //background-color: #EBF2FC;
+  /*background-color: rgb(243, 242, 241);*/
+  background-color: #F5F5F5;
+  /*background-color: #F4F2EE;*/
+  /*background-color: #0F0F0F;*/
+  /*background-color: #EBF2FC;*/
   height: 100vh;
   overflow-y: auto;
@@ -14,5 +27,5 @@
   -webkit-box-pack: center;
   justify-content: center;
-margin-bottom: 20px;
+  margin-bottom: 20px;
   margin-top: 20px;
 }
@@ -36,4 +49,12 @@
 }
 
+.container, .custom-container {
+  margin-top: 120px !important;
+}
+
+.no-additional-margin {
+  margin-top: 80px !important;
+}
+
 
 /*font-family: 'Ubuntu', sans-serif;*/
@@ -49,4 +70,10 @@
   height: 280px !important;
 }
+
+.container .g-4 {
+  --bs-gutter-y: 6rem !important;
+  margin-bottom: 100px !important;
+}
+
 
 .add-new-card {
@@ -80,5 +107,5 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   transform: translate(0, 0);
-  height: 260px;
+  height: auto;
 }
 
@@ -167,11 +194,11 @@
   border-radius: 8px;
   width: 45%;
-  background-color: rgba(207, 235, 255, 1);
-  //background-size: 200% auto;
-  //background-image: linear-gradient(to right, #a1c4fd 0%, aliceblue 61%, #a1c4fd 100%);
-  color: black;
+  background-image: linear-gradient(to bottom, #dddddd, #f0f0f0);
+  color: #333333;
   font-weight: bold;
   padding: 5px 10px;
   transition: 0.2s;
+  text-decoration: none;
+  text-align: center;
 }
 
@@ -180,14 +207,10 @@
 }
 .card-button:not(.disabled):hover{
-  background-color: rgb(187, 215, 235);
-  //background-position: right center;
-  color: black;
-}
-
-.disabled {
-  cursor: default !important;
-  opacity: 0.6;
-}
-
-
-
+  background: linear-gradient(to bottom, #bbbbbb, #dddddd);
+  color: #333333;
+}
+
+
+
+
+
Index: jobvista-frontend/src/App.js
===================================================================
--- jobvista-frontend/src/App.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/App.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -4,10 +4,12 @@
 import {BrowserRouter} from "react-router-dom";
 import {Header} from "./views/static/Header";
-import {RoutesConfig} from "./auth/RoutesConfig";
-import {useEffect, useState} from "react";
+import RoutesConfig from "./auth/RoutesConfig";
+import React, {useEffect, useState} from "react";
 import {AuthActions} from "./redux/actions/authActions";
 import {AUTH_TOKEN} from "./axios/axiosInstance";
 import {jwtDecode} from "jwt-decode";
 import {NoAccess} from "./views/static/NoAccess";
+import {Loading} from "./views/static/Loading";
+import {ToastContainer} from "react-toastify";
 
 function App() {
@@ -20,5 +22,17 @@
     const [user, setUser] = useState(null);
     const [loading, setLoading] = useState(true);
+    const [minimumLoadingTime, setMinimumLoadingTime] = useState(true);
+
     const auth = useSelector(state => state.auth);
+
+    useEffect(() => {
+        // Simulate a minimum loading time of 1 second
+        const timer = setTimeout(() => {
+            setMinimumLoadingTime(false);
+        }, 1000);
+
+        // Clear timeout if component unmounts
+        return () => clearTimeout(timer);
+    }, []);
 
     useEffect(() => {
@@ -30,5 +44,6 @@
                     name: decodedToken.name,
                     role: decodedToken.role,
-                    hasAccess: auth.currentUser.access,
+                    hasAccess: decodedToken.access,
+                    id: decodedToken.id
                 });
                 setLoading(false);
@@ -42,6 +57,6 @@
     }, [auth]);
 
-    if (loading) {
-        return <NoAccess />; // Replace LoadingSpinner with your loading indicator component
+    if (loading || minimumLoadingTime) {
+        return <Loading />; // Replace LoadingSpinner with your loading indicator component
     }
 
@@ -58,11 +73,11 @@
                       <Header />
                       <RoutesConfig />
+                      {/*<Loading/>*/}
                   </>
               ) : (
                   <NoAccess user={user}/>
               )}
-
-
           </BrowserRouter>
+          <ToastContainer/>
       </div>
   );
Index: jobvista-frontend/src/auth/RoutesConfig.js
===================================================================
--- jobvista-frontend/src/auth/RoutesConfig.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/auth/RoutesConfig.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -1,31 +1,212 @@
-
-import {Route, Router, Routes} from 'react-router-dom'
+import {Navigate, Route, Router, Routes} from 'react-router-dom'
 import {Dashboard} from "../views/dashboard/Dashboard";
 import {SignInForm} from "../views/auth/SignInForm";
 import {SignUpRecruiterForm} from "../views/auth/SignUpRecruiterForm";
 import {SignUpJobSeekerForm} from "../views/auth/SignUpJobSeekerForm";
-import {JobAdvertisements} from "../views/job_advertisements/JobAdvertisements";
+import {Workspace} from "../views/job_advertisements/RecruiterWorkspace";
 import {JobAdDetails} from "../views/job_advertisements/JobAdDetails";
 import {ApplicationsByJobAd} from "../views/applications/ApplicationsByJobAd";
 import {ApplicationsByJobSeeker} from "../views/applications/ApplicationsByJobSeeker";
+
+import {AdminPanel} from "../views/admin_panel/AdminPanel";
+import {RecruiterProfile} from "../views/recruiters/RecruiterProfile";
+import {AboutUs} from "../views/static/AboutUs";
+import {JobSeekerEditProfile} from "../views/edit_profile/JobSeekerEditProfile";
+import {RecruiterEditProfile} from "../views/edit_profile/RecruiterEditProfile";
+import Roles from "../enumerations/Roles";
+import {useSelector} from "react-redux";
 import {useEffect, useState} from "react";
-import {AUTH_TOKEN} from "../axios/axiosInstance";
-import {jwtDecode} from "jwt-decode";
-import {useSelector} from "react-redux";
-import {AdminPanel} from "../views/admin_panel/AdminPanel";
-export const RoutesConfig = () => {
+import {ErrorPage} from "../views/static/ErrorPage";
+
+export const PrivateRoutes = [
+    {
+        component: AdminPanel,
+        path: '/admin-panel',
+        title: 'Admin Panel',
+        exact: true,
+        permission: [
+            Roles.ADMIN
+        ]
+    },
+    {
+        component: Workspace,
+        path: '/job-management-hub',
+        title: 'Job Management Hub',
+        exact: true,
+        permission: [
+            Roles.RECRUITER,
+        ]
+    },
+    {
+        component: ApplicationsByJobAd,
+        path: '/job-management-hub/applications/:advertisement_id',
+        title: 'Applications by Job Ad',
+        exact: true,
+        permission: [
+            Roles.RECRUITER
+        ]
+    },
+    {
+        component: ApplicationsByJobSeeker,
+        path: '/my-applications',
+        title: 'My Applications',
+        exact: true,
+        permission: [
+            Roles.JOBSEEKER
+        ]
+    },
+
+    {
+        component: JobSeekerEditProfile,
+        path: '/job-seeker/edit-profile',
+        title: 'Edit Job Seeker Profile',
+        exact: true,
+        permission: [
+            Roles.JOBSEEKER
+        ]
+    },
+    {
+        component: RecruiterEditProfile,
+        path: '/recruiter/edit-profile',
+        title: 'Edit Recruiter Profile',
+        exact: true,
+        permission: [
+            Roles.RECRUITER
+        ]
+    },
+]
+
+export const PublicRoutes = [
+    {
+        component: Dashboard,
+        path: "/",
+        exact: true,
+        permission: [
+            Roles.RECRUITER,
+            Roles.JOBSEEKER,
+            Roles.ADMIN,
+            Roles.GUEST
+        ]
+    },
+    {
+        component: SignInForm,
+        path: '/signin',
+        title: 'Sign In',
+        exact: true,
+        permission: [
+            Roles.GUEST,
+            Roles.RECRUITER,
+            Roles.JOBSEEKER,
+            Roles.ADMIN
+        ]
+    },
+
+    {
+        component: SignUpRecruiterForm,
+        path: '/signup/recruiter',
+        title: 'Sign Up as Recruiter',
+        permission: [
+            Roles.GUEST,
+            Roles.RECRUITER,
+            Roles.JOBSEEKER,
+            Roles.ADMIN
+        ]
+    },
+    {
+        component: SignUpJobSeekerForm,
+        path: '/signup/job-seeker',
+        title: 'Sign Up as Job Seeker',
+        permission: [
+            Roles.GUEST,
+            Roles.RECRUITER,
+            Roles.JOBSEEKER,
+            Roles.ADMIN
+        ]
+    },
+    {
+        component: JobAdDetails,
+        path: '/job-advertisements/:id',
+        title: 'Job Advertisement Details',
+        exact: true,
+        permission: [
+            Roles.RECRUITER,
+            Roles.JOBSEEKER,
+            Roles.ADMIN,
+            Roles.GUEST
+        ]
+    },
+    {
+        component: RecruiterProfile,
+        path: '/recruiters/:id',
+        title: 'Recruiter Profile',
+        exact: true,
+        permission: [
+            Roles.RECRUITER,
+            Roles.JOBSEEKER,
+            Roles.ADMIN,
+            Roles.GUEST
+        ]
+    },
+    {
+        component: AboutUs,
+        path: '/about',
+        title: 'About Us',
+        exact: true,
+        permission: [
+            Roles.GUEST,
+            Roles.RECRUITER,
+            Roles.JOBSEEKER,
+            Roles.ADMIN
+        ]
+    },
+]
+
+const AllRoutes = [...PrivateRoutes, ...PublicRoutes];
+
+const filterRoutes = (roleParam) => {
+    return AllRoutes.filter(route => {
+        return route.permission.includes(roleParam);
+    });
+};
+const RoutesConfig = () => {
+    const currentUser = useSelector(state => state.auth.currentUser);
+    const [role, setRole] = useState(Roles.GUEST);
+
+    useEffect(() => {
+        if (currentUser) {
+            setRole(currentUser.role);
+        }
+    }, [currentUser]);
 
     return (
-            <Routes>
-                <Route path="/" element={<Dashboard/>}></Route>
-                <Route path="/signin" element={<SignInForm/>}></Route>
-                <Route path="/signup/recruiter" element={<SignUpRecruiterForm/>}></Route>
-                <Route path="/signup/job-seeker" element={<SignUpJobSeekerForm/>}></Route>
-                <Route path="/my-job-advertisements" element={<JobAdvertisements/>}></Route>
-                <Route path="/my-applications" element={<ApplicationsByJobSeeker/>}></Route>
-                <Route path="/job-advertisements/:id" element={<JobAdDetails/>}></Route>
-                <Route path="/my-job-advertisements/:advertisement_id/applications" element={<ApplicationsByJobAd/>}></Route>
-                <Route path="/admin-panel" element={<AdminPanel/>}></Route>
-            </Routes>
+        <Routes>
+            {filterRoutes(role).map(route => (
+                <Route
+                    key={route.path}
+                    path={route.path}
+                    element={<route.component/>}
+                    exact={route.exact}
+                />
+            ))}
+            <Route path="*" element={<ErrorPage to="/"/>}/>
+        </Routes>
+
+        // <Routes>
+        //     <Route path="/" element={<Dashboard/>}></Route>
+        //     <Route path="/signin" element={<SignInForm/>}></Route>
+        //     <Route path="/signup/recruiter" element={<SignUpRecruiterForm/>}></Route>
+        //     <Route path="/signup/job-seeker" element={<SignUpJobSeekerForm/>}></Route>
+        //     <Route path="/job-management-hub" element={<Workspace/>}></Route>
+        //     <Route path="/my-applications" element={<ApplicationsByJobSeeker/>}></Route>
+        //     <Route path="/job-advertisements/:id" element={<JobAdDetails/>}></Route>
+        //     <Route path="/recruiters/:id" element={<RecruiterProfile/>}></Route>
+        //     <Route path="/job-management-hub/applications/:advertisement_id" element={<ApplicationsByJobAd/>}></Route>
+        //     <Route path="/admin-panel" element={<AdminPanel/>}></Route>
+        //     <Route path="/about" element={<AboutUs/>}></Route>
+        //     <Route path="/job-seeker/edit-profile" element={<JobSeekerEditProfile/>}></Route>
+        //     <Route path="/recruiter/edit-profile" element={<RecruiterEditProfile/>}></Route>
+        // </Routes>
     )
 }
+
+export default RoutesConfig
Index: jobvista-frontend/src/enumerations/Roles.js
===================================================================
--- jobvista-frontend/src/enumerations/Roles.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/enumerations/Roles.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -14,3 +14,4 @@
     RECRUITER: 'ROLE_RECRUITER',
     JOBSEEKER: 'ROLE_JOBSEEKER',
+    GUEST: 'ROLE_GUEST'
 };
Index: jobvista-frontend/src/redux/actionTypes.js
===================================================================
--- jobvista-frontend/src/redux/actionTypes.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/redux/actionTypes.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -20,4 +20,7 @@
 export const FETCH_RECRUITERS = "FETCH_RECRUITERS"
 export const CHANGE_ACCESS = "CHANGE_ACCESS"
+export const SUBMIT_RECRUITER_LOGO = "SUBMIT_RECRUITER_LOGO"
+export const SUBMIT_RECRUITER_COVER = "SUBMIT_RECRUITER_COVER"
+export const SET_LOGO_URL = 'SET_LOGO_URL';
+export const SET_PROFILE_PIC_URL = 'SET_PROFILE_PIC_URL';
 
-
Index: jobvista-frontend/src/redux/actions/applicationActions.js
===================================================================
--- jobvista-frontend/src/redux/actions/applicationActions.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/redux/actions/applicationActions.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -47,8 +47,7 @@
       }
     },
-    fetchApplicationsByJobSeeker: (callback) => {
+    fetchApplicationsByJobSeeker: (jobSeekerId, callback) => {
       return dispatch => {
-          let currentUser = JSON.parse(localStorage.getItem(CURRENT_USER));
-          axios.get("/my-applications/" + currentUser.id)
+          axios.get("/my-applications/" + jobSeekerId)
               .then(response => {
                   dispatch({
Index: jobvista-frontend/src/redux/actions/authActions.js
===================================================================
--- jobvista-frontend/src/redux/actions/authActions.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/redux/actions/authActions.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -45,9 +45,8 @@
                 //const refreshToken = response.refreshToken;
                 const user = {
-                    id: response.id,
-                    email: response.email,
                     name: response.name,
                     role: response.role,
                     access: response.hasAccess,
+                    id: response.id,
                 };
                 dispatch({
Index: jobvista-frontend/src/redux/actions/jobAdvertisementActions.js
===================================================================
--- jobvista-frontend/src/redux/actions/jobAdvertisementActions.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/redux/actions/jobAdvertisementActions.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -87,8 +87,8 @@
     },
 
-    fetchJobAdvertisementsByRecruiter: (callback) => {
+    fetchJobAdvertisementsByRecruiter: (recruiterId, callback) => {
         return dispatch => {
             let currentUser = JSON.parse(localStorage.getItem(CURRENT_USER));
-            axios.get("/job-advertisements/recruiter/" + currentUser.id)
+            axios.get("/job-advertisements/recruiter/" + recruiterId)
                 .then(response => {
                     dispatch({
@@ -103,8 +103,8 @@
     },
 
-    filterJobAdvertisementsByRecruiter: (filter, callback) => {
+    filterJobAdvertisementsByRecruiter: (id, filter, callback) => {
 
         let currentUser = JSON.parse(localStorage.getItem(CURRENT_USER));
-        axios.post("/job-advertisements/recruiter/" + currentUser.id + "/filtered", filter)
+        axios.post("/job-advertisements/recruiter/" + id + "/filtered", filter)
             .then(response => {
                 callback(true, response)
@@ -116,5 +116,5 @@
 
     fetchRecruiterDetailsById: (id, callback) => {
-        axios.get("/recruiter/info/" + id)
+        axios.get("/recruiter/"+id+"/info")
             .then(response => {
                 callback(true, response)
Index: jobvista-frontend/src/redux/reducers/authReducer.js
===================================================================
--- jobvista-frontend/src/redux/reducers/authReducer.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/redux/reducers/authReducer.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -3,4 +3,5 @@
 import {isExpired} from "react-jwt";
 import {CURRENT_USER, SIGN_IN, SIGN_OUT, UPDATE_TOKEN} from "../actionTypes";
+import {jwtDecode} from "jwt-decode";
 
 const initialState = {
@@ -13,5 +14,5 @@
         case SIGN_IN:
             localStorage.setItem(AUTH_TOKEN, action.payload.token);
-            localStorage.setItem(CURRENT_USER, JSON.stringify(action.payload.user));
+            //localStorage.setItem(CURRENT_USER, JSON.stringify(action.payload.user));
             return {
                 ...state,
@@ -21,10 +22,24 @@
         case UPDATE_TOKEN:
             let token = action.payload;
+            let decodedToken;
             let currentUser = "";
+            if(token !=null) {
+                try {
+                    decodedToken = jwtDecode(token);
+                } catch (error) {
+                    console.log("Failed to decode token: " + error)
+                }
+            }
+
             if(!isExpired(token)) {
                 localStorage.setItem(AUTH_TOKEN, token);
-                currentUser = JSON.parse(localStorage.getItem(CURRENT_USER));
+                currentUser = {
+                    name: decodedToken.name,
+                    role: decodedToken.role,
+                    access: decodedToken.access,
+                    id: decodedToken.id
+                };
             } else {
-                localStorage.removeItem(CURRENT_USER);
+                //localStorage.removeItem(CURRENT_USER);
                 localStorage.removeItem(AUTH_TOKEN);
                 currentUser = "";
@@ -37,5 +52,5 @@
             };
         case SIGN_OUT:
-            localStorage.removeItem(CURRENT_USER);
+            //localStorage.removeItem(CURRENT_USER);
             localStorage.removeItem(AUTH_TOKEN);
             return {
Index: jobvista-frontend/src/redux/reducers/jobAdvertisementReducer.js
===================================================================
--- jobvista-frontend/src/redux/reducers/jobAdvertisementReducer.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/redux/reducers/jobAdvertisementReducer.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -1,7 +1,12 @@
 import {
     ADD_JOB_ADVERTISEMENT,
-    CURRENT_USER, DELETE_JOB_ADVERTISEMENT, EDIT_JOB_ADVERTISEMENT,
+    CURRENT_USER,
+    DELETE_JOB_ADVERTISEMENT,
+    EDIT_JOB_ADVERTISEMENT,
     FETCH_JOB_ADVERTISEMENTS,
-    FETCH_JOB_ADVERTISEMENTS_BY_RECRUITER, FILTER_JOB_ADVERTISEMENTS, FILTER_JOB_ADVERTISEMENTS_BY_RECRUITER
+    FETCH_JOB_ADVERTISEMENTS_BY_RECRUITER,
+    FILTER_JOB_ADVERTISEMENTS,
+    FILTER_JOB_ADVERTISEMENTS_BY_RECRUITER,
+    SET_LOGO_URL
 } from "../actionTypes";
 import {sortElementsBy} from "../../utils/utils";
Index: jobvista-frontend/src/redux/store.js
===================================================================
--- jobvista-frontend/src/redux/store.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/redux/store.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -6,4 +6,5 @@
 import adminReducer from "./reducers/adminReducer"
 import {AdminActions} from "./actions/adminActions";
+import ImagesReducer from "./reducers/imagesReducer";
 
 // const rootReducer = combineReducers({
@@ -21,5 +22,6 @@
         jobAd: jobAdReducer,
         appl: applicationReducer,
-        admin: adminReducer
+        admin: adminReducer,
+        images: ImagesReducer
     },
 });
Index: jobvista-frontend/src/views/admin_panel/AdminPanel.js
===================================================================
--- jobvista-frontend/src/views/admin_panel/AdminPanel.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/views/admin_panel/AdminPanel.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -4,4 +4,5 @@
 import {useState, useEffect} from "react";
 import {AdminActions} from "../../redux/actions/adminActions";
+import {notifyAccessUpdate} from "../../utils/toastUtils";
 
 export const AdminPanel = () => {
@@ -24,4 +25,6 @@
             setRecruiters(recruitersState)
             console.log("Fetch all recruiters STATE")
+            console.log(recruitersState)
+
         }
     }, [recruitersState])
@@ -32,5 +35,6 @@
     };
 
-    const handleAccessChange = (recruiterId, newAccessStatus) => {
+    const handleAccessChange = (recruiterId, companyName, newAccessStatus) => {
+
         setRecruiters(prevState =>
             prevState.map(recruiter =>
@@ -41,9 +45,7 @@
         );
 
-        console.log(recruiterId + " " + newAccessStatus)
-
         dispatch(AdminActions.changeAccess(recruiterId, newAccessStatus, (success, response) => {
             if(success) {
-                console.log("Access changed")
+                notifyAccessUpdate(companyName)
             }
         }));
@@ -51,5 +53,5 @@
 
     return (
-        <div className="applications-container mt-5">
+        <div className="custom-container mt-5">
             <table className="table table-striped">
                 <thead>
@@ -64,5 +66,5 @@
                 </thead>
                 <tbody>
-                {recruiters.map((recruiter) => (
+                {recruitersState.map((recruiter) => (
                     <tr key={recruiter.id}>
                         <th scope="row">{recruiter.id}</th>
@@ -70,5 +72,5 @@
                         <td>{recruiter.email}</td>
                         <td>{recruiter.companyName}</td>
-                        <td>{recruiter.phoneNumber}</td>
+                        <td>{recruiter.contactPhoneNumber}</td>
                         <td>
                             <label className="switch">
@@ -76,5 +78,5 @@
                                     type="checkbox"
                                     checked={recruiter.hasAccess}
-                                    onChange={(e) => handleAccessChange(recruiter.id, e.target.checked)}
+                                    onChange={(e) => handleAccessChange(recruiter.id, recruiter.companyName, e.target.checked)}
                                 />
                                 <span className="slider"></span>
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 befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -0,0 +1,84 @@
+import React, {useEffect, useState} from "react";
+import "../shared_css/Modal.css";
+
+import 'react-responsive-modal/styles.css';
+import {Modal} from 'react-responsive-modal';
+import Select from "react-select";
+
+//Validation
+import * as yup from "yup";
+import {yupResolver} from "@hookform/resolvers/yup";
+import {Controller, useForm} from "react-hook-form";
+
+
+import {employmentStatusOptions, industryOptions, jobTypeOptions} from "../selectOptions";
+import {useDispatch, useSelector} from "react-redux";
+import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
+import Roles from "../../enumerations/Roles";
+import {ApplicationActions} from "../../redux/actions/applicationActions";
+
+
+export const ApplicationDetailsModal = (props) => {
+    const {application} = props
+    const [modal, setModal] = useState(false);
+    const dispatch = useDispatch();
+    const auth = useSelector(state => state.auth.currentUser)
+    const [resumeUrl, setResumeUrl] = useState("");
+
+    //const [resumeFile, setResumeFile] = useState(null);
+    const toggleModal = () => {
+        setModal(!modal);
+    };
+
+    useEffect(() => {
+        if(application) {
+            dispatch(ApplicationActions.downloadResume(application.fileName, (success, response) => {
+                if(success) {
+                    setResumeUrl(response);
+                }
+            }))
+        }
+    }, [application])
+
+    return (<div className="modal-wrap">
+        <button onClick={toggleModal} className="application-button">View application</button>
+        <Modal open={modal} onClose={toggleModal} center >
+            <div className="head-modal">
+                <h3>{application.jobSeekerName}'s application for {application.jobAdTitle}</h3>
+                <i className="fa-solid fa-x btn-close-modal" onClick={toggleModal}></i>
+            </div>
+
+            <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"/>
+
+
+                            <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"/>
+
+                        </div>
+                        <div className="col-md-6">
+                            <label htmlFor="start">Curriculum vitae (CV)</label>
+                            <br/>
+                            <a className="resume-link" href={resumeUrl} target="_blank" rel="noopener noreferrer">{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"/>
+
+                        </div>
+                    </div>
+
+                </form>
+            </div>
+        </Modal>
+    </div>)
+}
Index: jobvista-frontend/src/views/applications/Applications.css
===================================================================
--- jobvista-frontend/src/views/applications/Applications.css	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/views/applications/Applications.css	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -1,3 +1,3 @@
-.applications-container {
+.custom-container {
     width: 65% !important;
     max-width: 1500px !important;
@@ -6,12 +6,13 @@
 
 .application-title {
-    font-family: Ubuntu;
-    text-transform: uppercase;
-    margin: 25px auto;
+    font-family: "Segoe UI";
+    margin-top: 40px;
+    margin-bottom: 20px;
     display: flex;
-    justify-content: center;
+    justify-content: start;
+    border-bottom: 1px solid #CFCFCF;
 }
-.application-title h1 {
-    font-weight: bold;
+.application-title h3 {
+    font-weight: 500;
 }
 
@@ -28,36 +29,54 @@
     transition: all 0.3s ease;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    transform: translate(0, 0);
     height: auto;
     padding: 20px 20px;
     display: flex;
     justify-content: center;
+    gap: 20px;
     margin: 15px 0;
+    /*z-index: -1000;*/
+}
+.application-card .app-job-seeker-pic {
+    border: 1px solid gray;
+    border-radius: 50%
+}
+.application-card .app-job-seeker-pic img {
+    border-radius: 50%;
 }
 
-.application-card .left-box {
-    width: 55%;
-    display: inline-block;
+.application-card .app-info {
+    width: 60%;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 10px;
 }
 
-.application-card .left-box .jobAd-title {
+.application-card .app-info .jobAd-title {
     font-weight: 600;
     /*text-transform: uppercase;*/
     font-family: 'Segoe UI', sans-serif;
-    font-size: 22px;
+    /*font-size: 22px;*/
 }
+.application-card .app-info .jobAd-title
 
-.application-card .left-box .contact-info {
+.application-card .app-info .contact-info {
     display: inline-flex;
-    gap: 10px;
+    gap: 30px;
 }
-.application-card .left-box .contact-info .contact-item {
+.application-card .app-info .contact-info .contact-item {
     display: inline-flex;
     align-items: center;
     gap: 5px;
+    margin-right: 10px
 }
 
-.application-card .right-box {
-    width: 45%;
+.application-card .app-info .contact-info .contact-item span {
+   color: darkgray;
+}
+
+.application-card .app-status {
+    width: 40%;
     display: inline-flex;
     justify-content: end;
@@ -66,8 +85,17 @@
 }
 
-.application-card .right-box .select {
-    width: 35%;
+.application-card .app-status .select {
+    width: 45%;
     display: inline-block;
 }
+
+.status {
+    color: white;
+    padding: 5px 10px;
+    border-radius: 5px;
+    width: 150px;
+    text-align: center;
+}
+
 
 .application-button {
@@ -75,12 +103,15 @@
     border-radius: 8px;
     width: auto;
-    background-color: rgba(207, 235, 255, 1);
-    color: black;
-    font-weight: bold;
-    padding: 5px 10px;
-    transition: 0.2s;
+    background-image: linear-gradient(to bottom, #dddddd, #f0f0f0);
+    background-color: #dddddd;
+    color: #333333;
+
+    font-weight: 700;
+    padding: 8px 13px;
 }
+
 .application-button:hover {
-    background-color: rgb(187, 215, 235);
+    background: linear-gradient(to bottom, #bbbbbb, #dddddd);
+    color: #333333;
 }
 
Index: jobvista-frontend/src/views/applications/ApplicationsByJobAd.js
===================================================================
--- jobvista-frontend/src/views/applications/ApplicationsByJobAd.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/views/applications/ApplicationsByJobAd.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -1,9 +1,12 @@
-import {useDispatch} from "react-redux";
+import {useDispatch, useSelector} from "react-redux";
 import {useEffect, useState} from "react";
 import {useParams} from "react-router";
 import {ApplicationActions} from "../../redux/actions/applicationActions";
-import {ViewApplicationDetails} from "./ViewApplicationDetails";
+import {ApplicationDetailsModal} from "./ApplicationDetailsModal";
 import "./Applications.css"
 import Select from "react-select";
+import {sortElementsBy} from "../../utils/utils";
+import {JobSeekerActions} from "../../redux/actions/JobSeekerActions";
+import {notifyAppStatusUpdate} from "../../utils/toastUtils";
 
 export const ApplicationsByJobAd = () => {
@@ -11,15 +14,58 @@
     const dispatch = useDispatch();
     let {advertisement_id} = useParams();
+
     const [applicationsByJobAd, setApplicationsByJobAd] = useState([]);
+    let applicationsByJobAdState = useSelector(state => state.appl.applicationsByJobAdId)
+    const [dispatched, setDispatched] = useState(false);
+
+    const [profilePics, setProfilePics] = useState({});
+    let profilePicsState = useSelector(state => state.images.profilePictures)
+    const [profilePicsDispatched, setProfilePicsDispatched] = useState(false);
+
     const [jobAdTitle, setJobAdTitle] = useState("");
 
     useEffect(() => {
-        dispatch(ApplicationActions.fetchApplicationsByJobAdId(advertisement_id, (success, reponse) => {
-            if (success && reponse.data.length > 0) {
-                setApplicationsByJobAd(reponse.data)
-                setJobAdTitle(reponse.data[0].jobAdTitle)
+        if(!dispatched && (applicationsByJobAdState.length === 0 || applicationsByJobAdState.length === 1)) {
+            dispatch(ApplicationActions.fetchApplicationsByJobAdId(advertisement_id, (success, reponse) => {
+                if (success && reponse.data.length > 0) {
+                    setApplicationsByJobAd(sortElementsBy(reponse.data, "submittedOn"))
+                    setJobAdTitle(reponse.data[0].jobAdTitle)
+                }
+                setDispatched(true)
+                console.log("Fetch applications by job ad GET")
+            }))
+        } else {
+            setApplicationsByJobAd(sortElementsBy(applicationsByJobAdState, "submittedOn"));
+            if(applicationsByJobAdState.length > 0) {
+                setJobAdTitle(applicationsByJobAdState[0].jobAdTitle)
+            }
+
+        }
+
+    }, [applicationsByJobAdState])
+
+    useEffect(() => {
+        if(dispatched && !profilePicsDispatched) {
+            applicationsByJobAd.forEach(app => {
+                if(app.jobSeekerId && !profilePics[app.jobSeekerId]) {
+                    fetchProfilePic(app.jobSeekerId)
+                }
+            })
+            setProfilePicsDispatched(true);
+            console.log("Fetch all profile pics GET")
+        } else if(profilePicsDispatched) {
+            setProfilePics(profilePicsState)
+            console.log("Fetch all profile pics STATE")
+        }
+    }, [dispatched])
+
+    const fetchProfilePic = (jobSeekerId) => {
+        dispatch(JobSeekerActions.downloadProfilePic(jobSeekerId, (success, response) => {
+            if(success) {
+                setProfilePics(prevState => ({...prevState, [jobSeekerId]: response}))
             }
         }))
-    }, [])
+    }
+
 
     const options = [
@@ -37,5 +83,6 @@
         dispatch(ApplicationActions.updateApplicationStatus(id, selectedOption.value, (success, response) => {
             if(success) {
-                console.log("Status updated.")
+                // console.log("Status updated.")
+                notifyAppStatusUpdate()
             }
         }))
@@ -43,16 +90,23 @@
 
 
-    return (<div className="applications-container">
+    return (<div className="custom-container">
         <div className="application-title">
             {jobAdTitle ?
-                <h1>Applications for <span>{jobAdTitle}</span></h1> :
+                <h3>Applications for <b>{jobAdTitle}</b></h3> :
                 <h1></h1>
             }
-
         </div>
 
         {applicationsByJobAd && applicationsByJobAd.map((application, index) => (
             <div className="application-card">
-                <div className="left-box">
+                <div className="app-job-seeker-pic">
+                    <img
+                        // loading gif
+                        src={profilePicsState[application.jobSeekerId]}
+                        alt=""
+                        width={75} height={75}
+                    />
+                </div>
+                <div className="app-info">
                     <span>Submitted on <b>{new Date(application.submittedOn).toLocaleString('default', {
                         day: 'numeric',
@@ -60,13 +114,10 @@
                         year: 'numeric'
                     })}</b></span>
-                    <br/><br/>
                     <div className="contact-info">
                         <div className="contact-item">
                             <i className="fa-solid fa-user"></i> <span>{application.jobSeekerName}</span>
-                        </div>
-                        <div className="contact-item">
+                        </div> <div className="contact-item">
                             <i className="fa-solid fa-envelope"></i> <span>{application.jobSeekerEmail}</span>
-                        </div>
-                        <div className="contact-item">
+                        </div> <div className="contact-item">
                             <i className="fa-solid fa-phone"></i> <span>{application.jobSeekerPhoneNumber}</span>
                         </div>
@@ -74,6 +125,6 @@
                 </div>
 
-                <div className="right-box">
-                    <ViewApplicationDetails application={application}/>
+                <div className="app-status">
+                    <ApplicationDetailsModal application={application}/>
                     <div className="select">
                         <Select options={options}  onChange={(selectedOption) => handleChangeStatus(selectedOption, application.id)} defaultValue={handleDefaultStatus(application.status)}/>
Index: jobvista-frontend/src/views/applications/ApplicationsByJobSeeker.js
===================================================================
--- jobvista-frontend/src/views/applications/ApplicationsByJobSeeker.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/views/applications/ApplicationsByJobSeeker.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -2,33 +2,73 @@
 import {useEffect, useState} from "react";
 import {ApplicationActions} from "../../redux/actions/applicationActions";
-import {ViewApplicationDetails} from "./ViewApplicationDetails";
+import {ApplicationDetailsModal} from "./ApplicationDetailsModal";
 import Select from "react-select";
+
+import {RecruiterActions} from "../../redux/actions/recruiterActions";
+import {sortElementsBy} from "../../utils/utils";
 
 export const ApplicationsByJobSeeker = () => {
     const dispatch = useDispatch();
+    const auth = useSelector(state => state.auth.currentUser);
+
     const [applicationsByJobSeeker, setApplicationsByJobSeeker] = useState([]);
     let applicationsByJobSeekerState = useSelector(state => state.appl.applicationsByJobSeeker);
     const [dispatched, setDispatched] = useState(false);
 
+    const [logos, setLogos] = useState({});
+    let logosState = useSelector(state => state.images.logos)
+    const [logoDispatched, setLogoDispatched] = useState(false);
+
+
+
     useEffect(() => {
-        if(!dispatched && applicationsByJobSeekerState.length === 0) {
-            dispatch(ApplicationActions.fetchApplicationsByJobSeeker((success, response) => {
+        if(!dispatched && (applicationsByJobSeekerState.length === 0 || applicationsByJobSeekerState.length === 1) ) {
+            dispatch(ApplicationActions.fetchApplicationsByJobSeeker(auth.id, (success, response) => {
                 if(success && response.data.length > 0) {
-                    setApplicationsByJobSeeker(response.data);
+                    setApplicationsByJobSeeker(sortElementsBy(response.data, "submittedOn"));
                 }
+                setDispatched(true)
                 console.log("Fetch applications by job seeker GET")
             }))
-            setDispatched(true)
+
         } else {
-            setApplicationsByJobSeeker(applicationsByJobSeekerState);
+            setApplicationsByJobSeeker(sortElementsBy(applicationsByJobSeekerState, "submittedOn"));
             console.log("Fetch applications by job seeker STATE")
         }
     }, [applicationsByJobSeekerState])
 
+    useEffect(() => {
+
+        if(dispatched && !logoDispatched) {
+            applicationsByJobSeeker.forEach(jobAd => {
+                if(jobAd.recruiterId && !logos[jobAd.recruiterId]) {
+                    fetchLogo(jobAd.recruiterId);
+                }
+            })
+            setLogoDispatched(true)
+            console.log("Fetch all logos GET")
+        } else if (logoDispatched){
+            setLogos(logosState)
+            console.log("Fetch all logos STATE")
+
+        }
+
+    }, [dispatched, logosState])
+
+
+
+    const fetchLogo = (recruiterId) => {
+        dispatch(RecruiterActions.downloadLogo(recruiterId, (success, response) => {
+            if(success) {
+                setLogos(prevLogos => ({...prevLogos, [recruiterId]: response}))
+            }
+        }));
+    };
+
     const options = [
-        {value: 'PROPOSED', label: <span><i className="fa-solid fa-paper-plane"></i> Proposed</span>},
-        {value: 'UNDER_REVIEW', label: <span><i className="fa-solid fa-file-pen"></i> Under Review</span>},
-        {value: 'ACCEPTED', label: <span><i className="fa-solid fa-user-check"></i> Accepted</span>},
-        {value: 'DENIED', label: <span><i className="fa-solid fa-user-slash"></i> Denied</span>}
+        {value: 'PROPOSED', label: <span className="status" style={{backgroundColor: '#4A90E2'}}><i className="fa-solid fa-paper-plane"></i> Proposed</span>},
+        {value: 'UNDER_REVIEW', label: <span className="status" style={{backgroundColor: '#F5A623'}}><i className="fa-solid fa-file-pen"></i> Under Review</span>},
+        {value: 'ACCEPTED', label: <span className="status" style={{backgroundColor: '#7ED321'}}><i className="fa-solid fa-user-check"></i> Accepted</span>},
+        {value: 'DENIED', label: <span className="status" style={{backgroundColor: '#D0021B'}}><i className="fa-solid fa-user-slash"></i> Denied</span>}
     ];
 
@@ -40,14 +80,22 @@
 
     return (
-        <div className="applications-container">
+        <div className="custom-container">
+
             <div className="application-title">
-
+                <h3>Application history</h3>
             </div>
             {applicationsByJobSeeker && applicationsByJobSeeker.map((application, index) => (
                 <div key={index} className="application-card">
-                    <div className="left-box">
-                        <span className="jobAd-title">{application.jobAdTitle}</span>
-                        <br/>
-                        <br/>
+                    <div className="app-company-logo">
+                        <img
+                            // loading gif
+                            src={logosState[application.recruiterId]}
+                            alt=""
+                            width={75} height={75}
+                        />
+                    </div>
+
+                    <div className="app-info">
+                        <div className="jobAd-title">{application.jobAdTitle}</div>
                         <div className="contact-info">
                             <div className="contact-item">
@@ -68,9 +116,10 @@
                     </div>
 
-                    <div className="right-box">
-                        <ViewApplicationDetails application={application}/>
-                        <div className="select">
-                            <Select isDisabled={true} options={options} defaultValue={handleDefaultValue(application.status)}/>
-                        </div>
+                    <div className="app-status">
+                        <ApplicationDetailsModal application={application}/>
+                        <> {handleDefaultValue(application.status).label}</>
+                        {/*<div className="select">*/}
+                        {/*    <Select isDisabled={true} options={options} />*/}
+                        {/*</div>*/}
 
                     </div>
Index: jobvista-frontend/src/views/applications/ApplyToJobAdModal.js
===================================================================
--- jobvista-frontend/src/views/applications/ApplyToJobAdModal.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/views/applications/ApplyToJobAdModal.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -1,8 +1,7 @@
 import React, {useState} from "react";
-import "../job_advertisements/Form.css";
+import "../shared_css/Modal.css";
 
 import 'react-responsive-modal/styles.css';
 import {Modal} from 'react-responsive-modal';
-import Select from "react-select";
 
 //Validation
@@ -12,9 +11,8 @@
 
 
-import {employmentStatusOptions, industryOptions, jobTypeOptions} from "../selectOptions";
 import {useDispatch, useSelector} from "react-redux";
-import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
 import Roles from "../../enumerations/Roles";
 import {ApplicationActions} from "../../redux/actions/applicationActions";
+import {notifyJobAdApply} from "../../utils/toastUtils";
 
 
@@ -55,6 +53,6 @@
                 formData,(success, response) => {
                     if(success) {
-                        console.log("Job Advertisement added")
                         toggleModal()
+                        notifyJobAdApply()
                     }
                 }
@@ -70,5 +68,5 @@
         {role===Roles.JOBSEEKER &&
             <>
-                {jobAd.active && <button onClick={toggleModal} className="card-button apply">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> }
             </>
@@ -86,15 +84,15 @@
                             <label className="label">Why are you interested in joining our company?</label>
                             <textarea type="text" placeholder="Write your answer here..."
-                                      {...register("answerOne")} className="applictaion-textarea"/>
+                                      {...register("answerOne")} className="application-textarea"/>
                             <p style={{color: "red"}}>{errors.answerOne?.message}</p>
 
                             <label className="label">What makes you a good fit for this position?</label>
                             <textarea type="text" placeholder="Write your answer here..."
-                                      {...register("answerTwo")} className="applictaion-textarea"/>
+                                      {...register("answerTwo")} className="application-textarea"/>
                             <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="applictaion-textarea"/>
+                                   {...register("answerThree")} className="application-textarea"/>
                             <p style={{color: "red"}}>{errors.answerThree?.message}</p>
 
@@ -103,10 +101,10 @@
                             <label htmlFor="start">Curriculum vitae (CV)</label>
                             <br/>
-                            <input {...register("file")} 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/>
                             <label className="label">Message to the recruiter</label>
                             <textarea type="text" placeholder="Optional..."
-                                      {...register("messageToRecruiter")} className="applictaion-textarea"/>
+                                      {...register("messageToRecruiter")} className="application-textarea"/>
 
                             <br/><br/>
@@ -115,5 +113,6 @@
                     </div>
 
-                    <div className="aligned">
+                    <div className="modal-buttons">
+                        <div className="cancel-btn" onClick={toggleModal}> Cancel</div>
                         <button className="submit-btn"> Submit</button>
                     </div>
Index: jobvista-frontend/src/views/applications/ViewApplicationDetails.js
===================================================================
--- jobvista-frontend/src/views/applications/ViewApplicationDetails.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ 	(revision )
@@ -1,84 +1,0 @@
-import React, {useEffect, useState} from "react";
-import "../job_advertisements/Form.css";
-
-import 'react-responsive-modal/styles.css';
-import {Modal} from 'react-responsive-modal';
-import Select from "react-select";
-
-//Validation
-import * as yup from "yup";
-import {yupResolver} from "@hookform/resolvers/yup";
-import {Controller, useForm} from "react-hook-form";
-
-
-import {employmentStatusOptions, industryOptions, jobTypeOptions} from "../selectOptions";
-import {useDispatch, useSelector} from "react-redux";
-import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
-import Roles from "../../enumerations/Roles";
-import {ApplicationActions} from "../../redux/actions/applicationActions";
-
-
-export const ViewApplicationDetails = (props) => {
-    const {application} = props
-    const [modal, setModal] = useState(false);
-    const dispatch = useDispatch();
-    const auth = useSelector(state => state.auth.currentUser)
-    const [resumeUrl, setResumeUrl] = useState("");
-
-    //const [resumeFile, setResumeFile] = useState(null);
-    const toggleModal = () => {
-        setModal(!modal);
-    };
-
-    useEffect(() => {
-        if(application) {
-            dispatch(ApplicationActions.downloadResume(application.fileName, (success, response) => {
-                if(success) {
-                    setResumeUrl(response);
-                }
-            }))
-        }
-    }, [application])
-
-    return (<div className="modal-wrap">
-        <button onClick={toggleModal} className="application-button">View application</button>
-        <Modal open={modal} onClose={toggleModal} center >
-            <div className="head-modal">
-                <h3>{application.jobSeekerName}'s application for {application.jobAdTitle}</h3>
-                <i className="fa-solid fa-x btn-close-modal" onClick={toggleModal}></i>
-            </div>
-
-            <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="applictaion-textarea"/>
-
-
-                            <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="applictaion-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="applictaion-textarea"/>
-
-                        </div>
-                        <div className="col-md-6">
-                            <label htmlFor="start">Curriculum vitae (CV)</label>
-                            <br/>
-                            <a className="resume-link" href={resumeUrl} target="_blank" rel="noopener noreferrer">{application.fileName}</a>
-                            <br/>
-
-                            <br/>
-                            <label className="label">Message to the recruiter</label>
-                            <textarea disabled type="text" defaultValue={application.message} placeholder="Optional..." className="applictaion-textarea"/>
-
-                        </div>
-                    </div>
-
-                </form>
-            </div>
-        </Modal>
-    </div>)
-}
Index: jobvista-frontend/src/views/auth/SignInForm.js
===================================================================
--- jobvista-frontend/src/views/auth/SignInForm.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/views/auth/SignInForm.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -8,4 +8,5 @@
 import {yupResolver} from "@hookform/resolvers/yup";
 import {AuthActions} from "../../redux/actions/authActions";
+import {notifyIncorrectEmailOrPassword} from "../../utils/toastUtils";
 
 export const SignInForm = () => {
@@ -27,15 +28,13 @@
     const signIn = async (values) => {
         try {
-            dispatch(AuthActions.signIn(values.emailLog, values.passwordLog,
-                    success => {
-                    // createSnackbar({
-                    //     message: success ? 'Successfully signed up.' : 'Error while signing up. Try again!',
-                    //     timeout: 2500,
-                    //     theme: success ? 'success' : 'error'
-                    // });
-                    success && navigate("/");
+            dispatch(AuthActions.signIn(values.emailLog, values.passwordLog, success => {
+                    if(success) {
+                        navigate("/")
+                    } else {
+                        notifyIncorrectEmailOrPassword()
+                    }
                 }));
         } catch (err) {
-            console.error(err);
+            // console.error(err);
         }
     }
Index: jobvista-frontend/src/views/dashboard/Dashboard.css
===================================================================
--- jobvista-frontend/src/views/dashboard/Dashboard.css	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ 	(revision )
@@ -1,48 +1,0 @@
-
-.head-dashboard-box {
-    height: 10%;
-    width: 100%;
-    background-color: #fff;
-    border-radius: 12px;
-    padding: 15px 20px;
-    margin-bottom: 20px;
-    margin-top: 30px;
-    height: auto;
-}
-
-.head-dashboard-box .filter-container {
-    display: inline-flex;
-    justify-content: center;
-    gap: 10px;
-}
-
-
-.head-dashboard-box .search-container {
-    position: relative;
-    /*float: left;*/
-    display: inline-block;
-}
-.head-dashboard-box .search-container .search-input {
-    width: 400px;
-    display: inline;
-    padding: 5px 30px;
-    border-radius: 10px;
-    /*margin-right: 15px;*/
-}
-
-.head-dashboard-box .search-container .search-input:focus {
-    outline-color: #6367ef;
-}
-
-.head-dashboard-box .search-container i {
-    left: 10px;
-    position: absolute;
-    top: 10px;
-}
-
-.head-dashboard-box .item {
-    width: 20%;
-    display: inline-block;
-    /*margin-left: 10px;*/
-    /*float: left !important;*/
-}
Index: jobvista-frontend/src/views/dashboard/Dashboard.js
===================================================================
--- jobvista-frontend/src/views/dashboard/Dashboard.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/views/dashboard/Dashboard.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -1,3 +1,3 @@
-import "./Dashboard.css"
+import "../shared_css/Random.css"
 
 import {useDispatch, useSelector} from "react-redux";
@@ -12,6 +12,7 @@
 import {AUTH_TOKEN} from "../../axios/axiosInstance";
 import {jwtDecode} from "jwt-decode";
-
-export const Dashboard = (props) => {
+import {RecruiterActions} from "../../redux/actions/recruiterActions";
+
+export const Dashboard = () => {
 
     const dispatch = useDispatch();
@@ -19,4 +20,10 @@
     const [jobAdvertisements, setJobAdvertisements] = useState([]);
     let jobAdvertisementsState = useSelector(state => state.jobAd.jobAdvertisements)
+    const [jobDispatched, setJobDispatched] = useState(false);
+
+    const [logos, setLogos] = useState({});
+    let logosState = useSelector(state => state.images.logos)
+    const [logoDispatched, setLogoDispatched] = useState(false);
+
     const auth = useSelector(state => state.auth);
 
@@ -25,5 +32,6 @@
     const [selectedIndustry, setSelectedIndustry] = useState("all");
     const [searchTerm, setSearchTerm] = useState("");
-    const [dispatched, setDispatched] = useState(false)
+
+
 
     // const [user, setUser] = useState(null);
@@ -54,10 +62,10 @@
 
     useEffect(() => {
-        if (!dispatched && jobAdvertisementsState.length == 0) {
+        if (!jobDispatched && jobAdvertisementsState.length == 0) {
             dispatch(JobAdvertisementActions.fetchJobAdvertisements((success, response) => {
                 if (success && response.data.length > 0) {
-                    setJobAdvertisements(sortElementsBy(response.data))
+                    setJobAdvertisements(sortElementsBy(response.data, "postedOn"))
                 }
-                setDispatched(true)
+                setJobDispatched(true)
                 console.log("Fetch all job advertisements GET")
             }))
@@ -66,6 +74,33 @@
             setJobAdvertisements(jobAdvertisementsState)
             console.log("Fetch all job advertisements STATE")
+
+
         }
     }, [jobAdvertisementsState])
+
+    useEffect(() => {
+
+        if(jobDispatched && !logoDispatched) {
+            jobAdvertisements.forEach(jobAd => {
+                if(jobAd.recruiterId && !logos[jobAd.recruiterId]) {
+                    fetchLogo(jobAd.recruiterId);
+                }
+            })
+            setLogoDispatched(true)
+            console.log("Fetch all logos GET")
+        } else {
+            setLogos(logosState)
+            console.log("Fetch all logos STATE")
+        }
+
+        }, [jobDispatched, logosState])
+
+    const fetchLogo = (recruiterId) => {
+        dispatch(RecruiterActions.downloadLogo(recruiterId, (success, response) => {
+            if(success) {
+                setLogos(prevLogos => ({...prevLogos, [recruiterId]: response}))
+            }
+        }));
+    };
 
     let filterJobAdvertisements = () => {
@@ -86,7 +121,7 @@
 
         <div className="container">
-            <div className="head-dashboard-box">
+            <div className="filter-container">
                 <div className="row">
-                    <div className="col-md-12 filter-container">
+                    <div className="col-md-12 filter-box">
                         <div className="search-container">
                             <i className="fa-solid fa-magnifying-glass search-icon"></i>
@@ -117,22 +152,9 @@
                             />
                         </div>
-                        <button onClick={filterJobAdvertisements} className="btn-open-modal">Find jobs</button>
+                        <button onClick={filterJobAdvertisements} className="blue-submit-button">Find jobs</button>
                     </div>
-                    {/*<div className="col-md-3">*/}
-
-                    {/*<div className="date-range-section item">*/}
-                    {/*    <Select*/}
-                    {/*        defaultValue={{value: "all", label: "Lifetime"}}*/}
-                    {/*        //value={selectedDateRange.value}*/}
-                    {/*        //onChange={option => setSelectedDateRange(option.value)}*/}
-                    {/*        options={dataRangeOptions}*/}
-                    {/*        className="date-range sort"*/}
-                    {/*    />*/}
-                    {/*</div>*/}
-                    {/*</div>*/}
                 </div>
             </div>
-            <div className="row row-cols-1 row-cols-md-4 g-4">
-
+            <div className="row row-cols-2 row-cols-md-4 g-4">
                 {jobAdvertisements &&
                     jobAdvertisements.map((jobAd, index) => (
@@ -146,4 +168,10 @@
                                 </div>
                                 <div className="card-body">
+                                    <img
+                                        // loading gif
+                                        src={logos[jobAd.recruiterId]}
+                                        alt=""
+                                        width={100} height={100}
+                                    />
                                     <h5 className="card-title">{jobAd.title}</h5>
                                     <span>{jobAd.industry} • <span style={{
Index: jobvista-frontend/src/views/job_advertisements/AddJobAdModal.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/AddJobAdModal.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/views/job_advertisements/AddJobAdModal.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -1,4 +1,4 @@
 import React, {useState} from "react";
-import "./Form.css";
+import "../shared_css/Modal.css";
 
 import { Editor } from 'primereact/editor';
@@ -17,4 +17,5 @@
 import {useDispatch, useSelector} from "react-redux";
 import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
+import {notifyJobAdPost} from "../../utils/toastUtils";
 
 
@@ -32,5 +33,5 @@
         description: yup.string().required("Please enter a description"),
         industry: yup.mixed().required("Select industry"),
-        startingSalary: yup.number().required("Please enter the starting salary"),
+        startingSalary: yup.string().required("Please enter the starting salary"),
         jobType: yup.mixed().required("Select job type"),
         employmentStatus: yup.mixed().required("Select employment status"),
@@ -46,5 +47,5 @@
             dispatch(JobAdvertisementActions.addJobAdvertisement(
                 {
-                    email: auth.email,
+                    id: auth.id,
                     title: values.title,
                     description: values.description,
@@ -56,6 +57,7 @@
                 }, (success, response) => {
                     if (success) {
-                        console.log("Job Advertisement added")
+                        // console.log("Job Advertisement added")
                         toggleModal()
+                        notifyJobAdPost()
                     }
                 }
@@ -75,5 +77,5 @@
         </div>
         {/*<button onClick={toggleModal} className="btn-open-modal">POST ADVERTISEMENT</button>*/}
-        <Modal open={modal} onClose={toggleModal} center classNames="job-advertisement-modal">
+        <Modal open={modal} onClose={toggleModal} center>
             <div className="head-modal">
                 <h3>Post Job Advertisement</h3>
@@ -82,5 +84,5 @@
 
             <div className="modal-content">
-                <form onSubmit={handleSubmit(addJobAdvertisement)}>
+                <form>
                     <div className="row">
                         <div className="col-md-7">
@@ -111,5 +113,5 @@
                         <div className="col-md-5">
                             <label className="label">Hourly rate:</label>
-                            <input {...register("startingSalary")}/>
+                            <input type="number" {...register("startingSalary")}/>
                             <p style={{color: "red"}}>{errors.startingSalary?.message}</p>
 
@@ -157,6 +159,7 @@
                     </div>
 
-                    <div className="aligned">
-                        <button className="submit-btn"> Submit</button>
+                    <div className="modal-buttons">
+                        <div className="cancel-btn" onClick={toggleModal}> Cancel</div>
+                        <button className="submit-btn" onClick={handleSubmit(addJobAdvertisement)}>Submit</button>
                     </div>
 
Index: jobvista-frontend/src/views/job_advertisements/DeleteJobAdModal.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/DeleteJobAdModal.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/views/job_advertisements/DeleteJobAdModal.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -1,4 +1,4 @@
 import React, {useState} from "react";
-import "./Form.css";
+import "../shared_css/Modal.css";
 
 import 'react-responsive-modal/styles.css';
@@ -15,4 +15,5 @@
 import {useDispatch, useSelector} from "react-redux";
 import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
+import {notifyJobAdDelete} from "../../utils/toastUtils";
 
 
@@ -29,6 +30,7 @@
             dispatch(JobAdvertisementActions.deleteJobAdvertisement(jobAd.props.id, (success, response) => {
                 if (success) {
-                    console.log("Job Advertisement deleted")
+                    // console.log("Job Advertisement deleted")
                     toggleModal()
+                    notifyJobAdDelete()
                 }
             }))
Index: jobvista-frontend/src/views/job_advertisements/EditJobAdModal.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/EditJobAdModal.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/views/job_advertisements/EditJobAdModal.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -1,4 +1,4 @@
 import React, {useEffect, useState} from "react";
-import "./Form.css";
+import "../shared_css/Modal.css";
 
 import 'react-responsive-modal/styles.css';
@@ -16,4 +16,5 @@
 import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
 import {Editor} from "primereact/editor";
+import {notifyJobAdDelete, notifyJobAdEdit} from "../../utils/toastUtils";
 
 
@@ -23,5 +24,8 @@
     const auth = useSelector(state => state.auth.currentUser)
     const toggleModal = () => {
+        console.log("NAD SET")
         setModal(!modal);
+        console.log("POD SET")
+
     };
 
@@ -52,6 +56,7 @@
                 }, jobAd.props.id, (success, response) => {
                     if(success) {
-                        console.log("Job Advertisement edited")
+                        // console.log("Job Advertisement edited")
                         toggleModal()
+                        notifyJobAdEdit()
                     }
                 }
@@ -78,5 +83,5 @@
 
             <div className="modal-content">
-                <form onSubmit={handleSubmit(editJobAdvertisement)}>
+                <form>
                     <div className="row">
                         <div className="col-md-7">
@@ -92,7 +97,8 @@
                                 name="description"
                                 control={control}
+                                defaultValue={jobAd.props.description}
                                 render={({ field }) => (
                                     <Editor
-                                        defaultValue={jobAd.props.description}
+                                        // defaultValue={jobAd.props.description}
                                         value={jobAd.props.description}
                                         onTextChange={(e) => field.onChange(e.htmlValue)}
@@ -107,5 +113,5 @@
                         <div className="col-md-5">
                             <label className="label">Hourly rate:</label>
-                            <input defaultValue={jobAd.props.startingSalary} {...register("startingSalary")}/>
+                            <input type="number" defaultValue={jobAd.props.startingSalary} {...register("startingSalary")}/>
                             <p style={{color: "red"}}>{errors.startingSalary?.message}</p>
 
@@ -166,8 +172,8 @@
                     </div>
 
-                    <div className="aligned">
-                        <button className="submit-btn"> Submit</button>
+                    <div className="modal-buttons">
+                        <div className="cancel-btn" onClick={toggleModal}> Cancel</div>
+                        <button className="submit-btn" onClick={handleSubmit(editJobAdvertisement)}> Save changes</button>
                     </div>
-
                 </form>
             </div>
Index: jobvista-frontend/src/views/job_advertisements/Form.css
===================================================================
--- jobvista-frontend/src/views/job_advertisements/Form.css	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ 	(revision )
@@ -1,190 +1,0 @@
-
-.modal-wrap {
-    display: inline;
-}
-.btn-open-modal {
-    font-size: 18px;
-    border-radius: 10px;
-    padding: 5px 10px;
-    background-color: #06367a;
-    border: none;
-    color: #fff;
-    font-weight: 600;
-    float: right;
-    /*margin-left: 10px;*/
-}
-
-.btn-close-modal {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-    padding: 5px 7px;
-    cursor: pointer;
-}
-
-.react-responsive-modal-modal {
-    background: #f1f1f1;
-    border-radius: 10px;
-    width: 1300px !important;
-    //min-width: 300px;
-    height: auto;
-    padding: 0 !important;
-    overflow-y: hidden;
-}
-
-.react-responsive-modal-closeButton {
-   display: none !important;
-}
-
-.react-responsive-modal-modal .head-modal {
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    background-color: rgba(1,38,90,0.9);
-    background-size: cover;
-    padding: 14px 48px;
-    color: white;
-}
-
-.react-responsive-modal-modal .head-modal h3 {
-    text-transform: uppercase;
-    font-weight: bold;
-    display: inline;
-}
-
-
-.react-responsive-modal-modal .modal-content {
-    /*line-height: 1.4;*/
-    padding: 30px 48px;
-    /*height: 100%;*/
-    border: 0;
-}
-
-.react-responsive-modal-modal .modal-content form .aligned {
-    text-align: center;
-}
-
-
-.react-responsive-modal-modal .modal-content form .label {
-    display: block;
-}
-
-input {
-    display: block;
-    padding: 5px 10px;
-    width: 100%;
-    border-radius: 3px;
-    border: 1px solid lightgrey;
-}
-
-textarea {
-    width: 100%;
-    resize: none;
-    border-radius: 3px;
-    border: 1px solid lightgrey;
-    padding: 5px 10px;
-}
-
-.description-textarea {
-    height: 285px;
-}
-
-.applictaion-textarea {
-    height: 100px;
-}
-
-.resume-link {
-    display: block;
-    padding: 5px 10px;
-    width: 100%;
-    border-radius: 3px;
-    border: 1px solid lightgrey;
-}
-.custom {
-    margin-top: 10px;
-}
-
-input:focus, textarea:focus {
-    outline-color: cornflowerblue;
-}
-
-.submit-btn {
-    position: relative;
-    padding: 5px 20px;
-    border-radius: 5px;
-    border: none;
-    color: white;
-    text-transform: uppercase;
-    font-weight: bold;
-    width: 30%;
-    /*clip-path: polygon(100% 0, 100% 75%, 95% 100%, 0 100%, 0 0);*/
-    background: linear-gradient(to right, #06367a, #06367a);
-    margin-top: 15px;
-}
-
-.category-option {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-/* DELETE MODAL */
-
-.modal-delete-buttons {
-    display: flex;
-    justify-content: flex-end;
-    gap: 10px;
-    margin-top: 25px;
-}
-
-.modal-delete-content {
-    padding: 20px 25px;
-}
-
-.modal-delete-content-inside {
-    display: flex;
-    align-items: center;
-}
-
-.modal-delete-text {
-    padding-left: 35px;
-
-}
-
-.modal-delete-text p {
-    margin: 0;
-}
-
-
-.cancel-btn, .delete-btn {
-    display: inline;
-    border: none;
-    padding: 5px 25px 5px 25px;
-    border-radius: 7px;
-}
-
-.delete-btn {
-    background-color: red;
-    color: white;
-}
-
-.x-icon {
-    transform: scale(3.3) !important;
-    color: #D93936 !important;
-    padding: 0 15px !important;
-    /*margin-top: 20px !important;*/
-}
-
-.ql-snow .ql-picker.ql-font {
-    display: none;
-}
-.ql-toolbar.ql-snow .ql-picker-options {
-    background-color: white;
-}
-.ql-snow .ql-tooltip {
-    transform: translateX(100px) !important;
-}
-
-
-
-
-
Index: jobvista-frontend/src/views/job_advertisements/JobAdDetails.css
===================================================================
--- jobvista-frontend/src/views/job_advertisements/JobAdDetails.css	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/views/job_advertisements/JobAdDetails.css	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -10,7 +10,26 @@
 .details-wrap {
     width: 100%;
-    //height: auto;
-    height: 80vh;
+    height: auto;
+    max-height: 80vh;
     overflow-y: auto;
+    background-color: #fff;
+    border-radius: 12px;
+    padding: 15px 20px;
+    margin-bottom: 20px;
+
+    /*scrollbar-width: thin; !* "auto" hides scrollbar on some browsers, "thin" shows a thin scrollbar *!*/
+    /*scrollbar-color: #999999 #fff;*/
+}
+
+.details-wrap .span-about {
+    color: darkgray;
+}
+
+
+
+.details-wrap-profile {
+    width: 100%;
+    height: auto;
+
     background-color: #fff;
     border-radius: 12px;
@@ -56,4 +75,25 @@
 }
 
+.apply-button {
+    border: 0;
+    border-radius: 8px;
+    width: 45%;
+    background-image: linear-gradient(to right, #a1c4fd 0%, aliceblue 61%, #a1c4fd 100%);
+    background-size: 200% auto;
+    font-weight: bold;
+    padding: 5px 10px;
+    transition: 0.4s;
+}
+
+.apply-button:not(.disabled):hover{
+    background-color: rgb(187, 215, 235);
+    color: black;
+}
+
+.disabled {
+    cursor: default !important;
+    opacity: 0.6;
+}
+
 .apply:not(.expired) {
     width: 20% !important;
@@ -65,2 +105,8 @@
     background-position: right center;
 }
+
+.recruiter-link {
+    color: black;
+    font-size: 30px;
+    text-decoration:none;
+}
Index: jobvista-frontend/src/views/job_advertisements/JobAdDetails.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/JobAdDetails.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/views/job_advertisements/JobAdDetails.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -10,4 +10,6 @@
 import {AddJobAdModal} from "./AddJobAdModal";
 import {ApplyToJobAdModal} from "../applications/ApplyToJobAdModal";
+import {Link} from "react-router-dom";
+import {RecruiterActions} from "../../redux/actions/recruiterActions";
 
 
@@ -20,7 +22,28 @@
     const auth = useSelector(state => state.auth.currentUser);
 
+    let logosState = useSelector(state => state.images.logos)
+    const [logoDispatched, setLogoDispatched] = useState(false)
+    const [logoView, setLogoView] = useState(null);
+
     useEffect(() => {
         setRole(auth.role)
     }, [auth])
+
+    useEffect(() => {
+        if (jobAd) {
+            if (!logoDispatched && !logosState[jobAd.recruiterId]) {
+                dispatch(RecruiterActions.downloadLogo(jobAd.recruiterId, (success, response) => {
+                    if (success) {
+                        setLogoView(response)
+                        setLogoDispatched(true)
+                    }
+                }))
+            } else {
+                setLogoView(logosState[jobAd.recruiterId])
+            }
+
+        }
+
+    }, [jobAd])
 
 
@@ -41,18 +64,36 @@
             <div className="col-md-9">
                 <div className="details-wrap">
+                    <div className="row">
+                        <div className="col-md-9">
+                            <div className="title">
+                                <h2>{jobAd.title} </h2>
+                                <span className="job-type"> {jobAd.jobType===JobType.JOB ? "Job" : "Internship"}</span>
+                                {!jobAd.active && <span className="expired">Expired</span>}
+                            </div>
 
-                    <div className="title">
-                        <h2>{jobAd.title} </h2>
-                        <span className="job-type"> {jobAd.jobType===JobType.JOB ? "Job" : "Internship"}</span>
-                        {!jobAd.active && <span className="expired">Expired</span>}
+                            <p className="details-head-info">
+                                <span><b>{jobAd.recruiterName}</b></span> • <span>{jobAd.industry}</span> • <span>{formatRelativeTime(jobAd.postedOn)}</span>
+                            </p>
+
+                            <p><i className="fa-solid fa-money-check-dollar"></i> <span>Hourly rate: ${jobAd.startingSalary}</span></p>
+                            <p><i className="fa-solid fa-briefcase"></i> Employment status: {jobAd.employmentStatus==="FULL_TIME" ? "Full-time" : "Part-time"}</p>
+                            <p><i className="fa-solid fa-calendar-days"></i> Active until: {new Date(jobAd.activeUntil).toLocaleString('default', { day: 'numeric', month: 'long',  year: 'numeric' })}</p>
+
+                        </div>
+                        <div className="col-md-3">
+                            {jobAd.recruiterId &&
+                                <>
+                                    <img
+                                        // loading gif
+                                        src={logosState[jobAd.recruiterId]}
+                                        alt=""
+                                        width={200} height={200}
+                                    />
+                                </>
+                            }
+
+                        </div>
                     </div>
 
-                    <p className="details-head-info">
-                        <span><b>{jobAd.recruiterName}</b></span> • <span>{jobAd.industry}</span> • <span>{formatRelativeTime(jobAd.postedOn)}</span>
-                    </p>
-
-                    <p><i className="fa-solid fa-money-check-dollar"></i> <span>Hourly rate: ${jobAd.startingSalary}</span></p>
-                    <p><i className="fa-solid fa-briefcase"></i> Employment status: {jobAd.employmentStatus==="FULL_TIME" ? "Full-time" : "Part-time"}</p>
-                    <p><i className="fa-solid fa-calendar-days"></i> Active until: {new Date(jobAd.activeUntil).toLocaleString('default', { day: 'numeric', month: 'long',  year: 'numeric' })}</p>
 
                     <h4>About the job</h4>
@@ -66,17 +107,25 @@
             <div className="col-md-3">
                 <div className="details-wrap">
-                    <h3>{jobAd.recruiterName}</h3>
+                    <Link className="recruiter-link" to={`/recruiters/${jobAd.recruiterId}`}>{jobAd.recruiterName} </Link>
 
-                    {/*TO DO - AFTER IMPLEMENTING FORM FOR UPDATING PERSONAL INFO*/}
                     <h4>About the company</h4>
                     <p>
-                        For over two decades, we have been harnessing technology to drive meaningful change.  Working side by side with leading brands, we build strategies, products and solutions tailored to unique needs –regardless of industry, region or scale. By combining world-class engineering, industry expertise and a people-centric mindset, we consult and partner with our customers to create technological solutions that drive innovation and transform businesses.
-                        <br/><br/>
-                        From ideation to production, we support our customers with bespoke solutions across various industries, including payments, insurance, finance and banking, technology, media and entertainment, telecommunications, retail and consumer goods, supply chain and logistics, healthcare and life sciences, energy and resources, government, automotive and travel.
+                        {recruiterDetails.companyDescription
+                            ? recruiterDetails.companyDescription.length > 710
+                                ? `${recruiterDetails.companyDescription.substring(0, 710)}...`
+                                : recruiterDetails.companyDescription
+                            : "There is no info about this company yet."
+                        }
+                    </p>
 
+                    <p>
+                        <i className="fa-solid fa-envelope"></i> <span className="span-about"> {recruiterDetails.contactEmail}</span> <br/>
+                        <i className="fa-solid fa-phone"></i> <span className="span-about"> {recruiterDetails.contactPhoneNumber}</span> <br/>
+                        {recruiterDetails.receptionist && <><i className="fa-solid fa-user-tie"></i> <span className="span-about"> {recruiterDetails.receptionist}</span> </>}
                     </p>
-                    <p><span><i className="fa-solid fa-envelope"></i> {recruiterDetails.email}</span> • <span>
-                <i className="fa-solid fa-phone"></i> {recruiterDetails.phoneNumber}</span>
-                    </p>
+
+                    <div className="d-flex justify-content-center mt-4">
+                        <Link className="card-button" to={`/recruiters/${jobAd.recruiterId}`}>Read more </Link>
+                    </div>
                 </div>
             </div>
Index: jobvista-frontend/src/views/job_advertisements/JobAdvertisements.css
===================================================================
--- jobvista-frontend/src/views/job_advertisements/JobAdvertisements.css	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/views/job_advertisements/JobAdvertisements.css	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -0,0 +1,126 @@
+.photo-box {
+    position: relative;
+    margin-bottom: 140px;
+}
+
+.photo-box div img {
+    background-color: rgb(243, 242, 241);
+}
+
+.company-banner {
+    width: 100%;
+    height: 300px;
+    object-fit: cover;
+    object-position: initial;
+    display: block;
+    border-radius: 10px;
+}
+
+.company-logo {
+    position: absolute;
+    border-radius: 25px;
+    border: 5px solid rgb(243, 242, 241);
+    bottom: -110px;
+    left: 70px
+}
+
+.info-tab {
+    margin: 20px 10px;
+    position: absolute;
+    left: 280px;
+    font-family: Poppins;
+}
+
+.photo-box .edit-buttons {
+    display: flex;
+    gap: 10px;
+    position: absolute;
+    right: 20px;
+    bottom: -100px;
+}
+
+.edit-buttons .exclamation {
+    display: inline;
+    position: relative;
+}
+
+.fa-circle-exclamation {
+    color: #d80e0e;
+
+}
+
+.edit-buttons .modal-wrap .react-responsive-modal-modal .head-modal {
+    background-color: white !important;
+    color: black !important;
+}
+
+.edit-buttons button {
+    background-color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 7px 13px;
+    transition: 0.1s;
+}
+
+.edit-buttons button:hover {
+    /*background-color: #F2F2F2;*/
+    background-color: lightgray;
+}
+
+.my-workspace {
+    position: relative;
+}
+
+.custom-text-area {
+    height: 14rem !important;
+}
+
+.line-separator {
+    width: 95%;
+    border-top: 1px solid gray;
+    border-radius: 5px;
+    margin: auto;
+    margin-bottom: 30px;
+}
+
+
+.confirmation-bar {
+    position: fixed;
+    //top: 80px;
+    left: 0;
+    width: calc(100% - 17px);
+    background-color: rgba(0, 0, 0, 0.5); /* Adjust background color as needed */
+    //background-color: #7D7D7A; /* Adjust background color as needed */
+    padding: 10px;
+    z-index: 11;
+
+}
+.confirmation-bar-buttons {
+    display: flex;
+    justify-content: right;
+    gap: 10px;
+    margin-right: 60px
+}
+.confirmation-bar .confirmation-bar-buttons button {
+    padding: 5px 20px;
+    border: none;
+    border-radius: 8px;
+    color: white;
+    transition: 0.1s;
+}
+.confirmation-bar .confirmation-bar-buttons .cancel-changes {
+    background-color: #8D8D8B;
+}
+
+.confirmation-bar .confirmation-bar-buttons .cancel-changes:hover {
+    background-color: #9B9A99;
+}
+
+.confirmation-bar .confirmation-bar-buttons .save-changes {
+    background-color: #0866FF;
+
+}
+.confirmation-bar .confirmation-bar-buttons .save-changes:hover {
+    background-color: dodgerblue;
+}
+
Index: jobvista-frontend/src/views/job_advertisements/JobAdvertisements.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/JobAdvertisements.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ 	(revision )
@@ -1,146 +1,0 @@
-import {AddJobAdModal} from "./AddJobAdModal";
-
-import "./JobAdvertisements.css"
-import {useDispatch, useSelector} from "react-redux";
-import {useEffect, useState} from "react";
-import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
-import {formatRelativeTime, sortElementsBy} from "../../utils/utils";
-import {dataRangeOptions, industryOptions, industryOptionsFilter, sortOptions} from "../selectOptions";
-import Select from "react-select";
-import {DeleteJobAdModal} from "./DeleteJobAdModal";
-import {EditJobAdModal} from "./EditJobAdModal";
-import {Link} from "react-router-dom";
-import JobType from "../../enumerations/JobType";
-
-export const JobAdvertisements = (props) => {
-
-    const dispatch = useDispatch();
-    const [jobAdvertisementsByRecruiter, setJobAdvertisementsByRecruiter] = useState([]);
-    const auth = useSelector(state => (state.auth.currentUser))
-    let jobAdvertisementsByRecruiterState = useSelector(state => (state.jobAd.jobAdvertisementsByRecruiter))
-
-    const [role, setRole] = useState("");
-    const [selectedSortOrder, setSelectedSortOrder] = useState("date_newest");
-    const [selectedIndustry, setSelectedIndustry] = useState("all");
-    const [searchTerm, setSearchTerm] = useState("");
-    const [dispatched, setDispatched] = useState(false)
-
-
-    useEffect(() => {
-        if (auth) {
-            setRole(auth.role);
-        }
-    }, [auth]);
-
-    useEffect(() => {
-        if (!dispatched && jobAdvertisementsByRecruiterState.length === 0) {
-            dispatch(JobAdvertisementActions.fetchJobAdvertisementsByRecruiter((success, response) => {
-                if (success && response.data.length > 0) {
-                    setJobAdvertisementsByRecruiter(sortElementsBy(response.data))
-                }
-                console.log("Fetch job advertisements by recruiter GET")
-            }))
-            setDispatched(true);
-
-        } else {
-            setJobAdvertisementsByRecruiter(jobAdvertisementsByRecruiterState)
-            console.log("Fetch job advertisements by recruiter STATE")
-        }
-    }, [jobAdvertisementsByRecruiterState])
-
-    let filterJobAdvertisements = () => {
-        JobAdvertisementActions.filterJobAdvertisementsByRecruiter(
-            {
-                searchTerm: searchTerm,
-                industry: selectedIndustry,
-                sortOrder: selectedSortOrder
-            }, (success, response) => {
-                if (success) {
-                    setJobAdvertisementsByRecruiter(response.data);
-                }
-            }
-        )
-    }
-
-    return (
-        <div className="container">
-            <div className="head-dashboard-box">
-                <div className="row">
-                    <div className="col-md-12 filter-container">
-                        <div className="search-container">
-                            <i className="fa-solid fa-magnifying-glass search-icon"></i>
-                            <input
-                                className="search-input"
-                                type="text"
-                                placeholder="Search job advertisement by title..."
-                                value={searchTerm}
-                                onChange={event => setSearchTerm(event.target.value)}
-                            />
-                        </div>
-                        <div className="sort-section item">
-                            <Select
-                                defaultValue={{value: "all", label: "All industries"}}
-                                value={selectedIndustry.value}
-                                onChange={option => setSelectedIndustry(option.value)}
-                                options={industryOptionsFilter}
-                                className="sort-range sort"
-                            />
-                        </div>
-                        <div className="sort-section item">
-                            <Select
-                                defaultValue={{value: "newest", label: "Date (Newest First)"}}
-                                value={selectedSortOrder.value}
-                                onChange={option => setSelectedSortOrder(option.value)}
-                                options={sortOptions}
-                                className="sort-range sort"
-                            />
-                        </div>
-                        <button onClick={filterJobAdvertisements} className="btn-open-modal">Find jobs</button>
-                    </div>
-                </div>
-            </div>
-            <div className="row row-cols-1 row-cols-md-4 g-4">
-                <AddJobAdModal/>
-
-                {jobAdvertisementsByRecruiter &&
-                    jobAdvertisementsByRecruiter.map((jobAd, index) => (
-                        <div key={index} className="col">
-                            <div className="custom-card">
-                                <div className="card-head">
-                                    <span className="hourly-salary"><b>${jobAd.startingSalary}/hr</b></span>
-                                    <span
-                                        className="job-type"> {jobAd.jobType === JobType.JOB ? "Job" : "Internship"}</span>
-                                    {!jobAd.active && <span className="expired">Expired</span>}
-                                    <div className="card-management-btns">
-                                        <DeleteJobAdModal props={jobAd}/>
-                                        <EditJobAdModal props={jobAd}/>
-                                    </div>
-                                </div>
-                                <div className="card-body">
-                                    <h5 className="card-title">{jobAd.title}</h5>
-                                    <span>{jobAd.industry} • <span style={{
-                                        color: "black",
-                                        fontWeight: "bold"
-                                    }}>{formatRelativeTime(jobAd.postedOn)}</span></span>
-                                    <div className="card-info">
-                                        <span><i className="fa-solid fa-building"
-                                                 style={{color: "#000000"}}></i> Company: <span style={{
-                                            color: "black",
-                                            fontWeight: "bold"
-                                        }}>{jobAd.recruiterName}</span></span> <br/>
-                                    </div>
-
-                                    <div className="aligned">
-                                        <Link to={`/my-job-advertisements/${jobAd.id}/applications`}
-                                              className="card-button solo">View applications</Link>
-                                    </div>
-
-                                </div>
-                            </div>
-                        </div>
-                    ))}
-
-            </div>
-        </div>
-    )
-}
Index: jobvista-frontend/src/views/job_advertisements/RecruiterWorkspace.js
===================================================================
--- jobvista-frontend/src/views/job_advertisements/RecruiterWorkspace.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
+++ jobvista-frontend/src/views/job_advertisements/RecruiterWorkspace.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -0,0 +1,165 @@
+import {AddJobAdModal} from "./AddJobAdModal";
+
+import "./JobAdvertisements.css"
+import "../shared_css/Random.css"
+
+import {useDispatch, useSelector} from "react-redux";
+import {useEffect, useState} from "react";
+import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
+import {formatRelativeTime, sortElementsBy} from "../../utils/utils";
+import {dataRangeOptions, industryOptions, industryOptionsFilter, sortOptions} from "../selectOptions";
+import Select from "react-select";
+import {DeleteJobAdModal} from "./DeleteJobAdModal";
+import {EditJobAdModal} from "./EditJobAdModal";
+import {Link} from "react-router-dom";
+import JobType from "../../enumerations/JobType";
+import {RecruiterActions} from "../../redux/actions/recruiterActions";
+
+
+export const Workspace = (props) => {
+
+    const dispatch = useDispatch();
+    const [dispatched, setDispatched] = useState(false)
+
+    const auth = useSelector(state => (state.auth.currentUser))
+
+    const [jobAdvertisementsByRecruiter, setJobAdvertisementsByRecruiter] = useState([]);
+    let jobAdvertisementsByRecruiterState = useSelector(state => (state.jobAd.jobAdvertisementsByRecruiter))
+
+    const [recruiterDetails, setRecruiterDetails] = useState(null);
+
+    const [selectedSortOrder, setSelectedSortOrder] = useState("date_newest");
+    const [selectedIndustry, setSelectedIndustry] = useState("all");
+    const [searchTerm, setSearchTerm] = useState("");
+
+    const [activeJobListingsCount, setActiveJobListingsCount] = useState(0);
+
+    useEffect(() => {
+        if (auth) {
+            dispatch(RecruiterActions.fetchRecruiterEditDetailsById(auth.id, (success, response) => {
+                if (success) {
+                    setRecruiterDetails(response.data)
+                }
+            }))
+        }
+    }, [auth]);
+
+
+    useEffect(() => {
+        if (!dispatched && jobAdvertisementsByRecruiterState.length === 0) {
+            dispatch(JobAdvertisementActions.fetchJobAdvertisementsByRecruiter(auth.id, (success, response) => {
+                if (success && response.data.length > 0) {
+                    setJobAdvertisementsByRecruiter(sortElementsBy(response.data))
+                }
+                console.log("Fetch job advertisements by recruiter GET")
+            }))
+            setDispatched(true);
+
+        } else {
+            setJobAdvertisementsByRecruiter(jobAdvertisementsByRecruiterState)
+            console.log("Fetch job advertisements by recruiter STATE")
+
+            setActiveJobListingsCount(countActiveJobListings(jobAdvertisementsByRecruiterState));
+        }
+
+    }, [jobAdvertisementsByRecruiterState])
+
+    let filterJobAdvertisements = () => {
+        JobAdvertisementActions.filterJobAdvertisementsByRecruiter({
+            searchTerm: searchTerm, industry: selectedIndustry, sortOrder: selectedSortOrder
+        }, (success, response) => {
+            if (success) {
+                setJobAdvertisementsByRecruiter(response.data);
+            }
+        })
+    }
+
+    function countActiveJobListings(jobAds) {
+        if (jobAds.length > 0) {
+            const activeJobListings = jobAds.filter(job => job.active)
+            return activeJobListings.length;
+        }
+        return 0;
+    }
+
+    return (<div className="container">
+
+            {/*<div className="line-separator"></div>*/}
+
+            <div className="filter-container">
+                <div className="row">
+                    <div className="col-md-12 filter-box">
+                        <div className="search-container">
+                            <i className="fa-solid fa-magnifying-glass search-icon"></i>
+                            <input
+                                className="search-input"
+                                type="text"
+                                placeholder="Search job advertisement by title..."
+                                value={searchTerm}
+                                onChange={event => setSearchTerm(event.target.value)}
+                            />
+                        </div>
+                        <div className="sort-section item">
+                            <Select
+                                defaultValue={{value: "all", label: "All industries"}}
+                                value={selectedIndustry.value}
+                                onChange={option => setSelectedIndustry(option.value)}
+                                options={industryOptionsFilter}
+                                className="sort-range sort"
+                            />
+                        </div>
+                        <div className="sort-section item">
+                            <Select
+                                defaultValue={{value: "newest", label: "Date (Newest First)"}}
+                                value={selectedSortOrder.value}
+                                onChange={option => setSelectedSortOrder(option.value)}
+                                options={sortOptions}
+                                className="sort-range sort"
+                            />
+                        </div>
+                        <button onClick={filterJobAdvertisements} className="blue-submit-button">Find jobs</button>
+                    </div>
+                </div>
+            </div>
+            <div className="row row-cols-1 row-cols-md-5 g-3">
+                <AddJobAdModal/>
+
+                {jobAdvertisementsByRecruiter && jobAdvertisementsByRecruiter.map((jobAd, index) => (
+                    <div key={index} className="col">
+                        <div className="custom-card">
+                            <div className="card-head">
+                                <span className="hourly-salary"><b>${jobAd.startingSalary}/hr</b></span>
+                                <span
+                                    className="job-type"> {jobAd.jobType === JobType.JOB ? "Job" : "Internship"}</span>
+                                {!jobAd.active && <span className="expired">Expired</span>}
+                                <div className="card-management-btns">
+                                    <DeleteJobAdModal props={jobAd}/>
+                                    <EditJobAdModal props={jobAd}/>
+                                </div>
+                            </div>
+                            <div className="card-body">
+                                <h5 className="card-title">{jobAd.title}</h5>
+                                <span>{jobAd.industry} • <span style={{
+                                    color: "black", fontWeight: "bold"
+                                }}>{formatRelativeTime(jobAd.postedOn)}</span></span>
+                                <div className="card-info">
+                                        <span><i className="fa-solid fa-building"
+                                                 style={{color: "#000000"}}></i> Company: <span style={{
+                                            color: "black", fontWeight: "bold"
+                                        }}>{jobAd.recruiterName}</span></span> <br/>
+                                </div>
+
+                                <div className="aligned">
+                                    <Link to={`/job-management-hub/applications/${jobAd.id}`}
+                                          className="card-button solo">View applications</Link>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>))}
+            </div>
+        </div>
+
+
+    )
+}
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 befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -0,0 +1,205 @@
+
+.modal-wrap {
+    display: inline;
+}
+
+.btn-close-modal {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    padding: 5px 7px;
+    cursor: pointer;
+}
+
+.react-responsive-modal-modal {
+    background: #f1f1f1;
+    border-radius: 10px;
+    min-width: 1000px !important;
+    max-width: 1000px !important;
+    height: auto;
+    padding: 0 !important;
+    overflow-y: hidden;
+}
+
+.react-responsive-modal-closeButton {
+   display: none !important;
+}
+
+.react-responsive-modal-modal .head-modal {
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    background-color: rgba(1,38,90,0.9);
+    /*background-color: white;*/
+    background-size: cover;
+    padding: 14px 48px;
+    /*color: #3A3B3C;*/
+    color: white;
+    border-bottom: 1px solid #E5E4E7;
+    display: flex;
+    justify-content: left;
+}
+
+.react-responsive-modal-modal .head-modal h3 {
+    text-transform: uppercase;
+    font-weight: bold;
+    display: inline;
+    margin: 0;
+}
+
+
+.react-responsive-modal-modal .modal-content {
+    /*line-height: 1.4;*/
+    padding: 30px 48px;
+    /*height: 100%;*/
+    border: 0;
+}
+
+.react-responsive-modal-modal .modal-content form .modal-buttons{
+    display: flex;
+    justify-content: end;
+    gap: 10px;
+    margin-right: 10px;
+}
+
+
+.react-responsive-modal-modal .modal-content form .label {
+    display: block;
+}
+
+.react-responsive-modal-modal .modal-content form input {
+    display: block;
+    padding: 5px 10px;
+    width: 100%;
+    border-radius: 3px;
+    border: 1px solid lightgrey;
+}
+
+.react-responsive-modal-modal .modal-content form textarea {
+    width: 100%;
+    resize: none;
+    border-radius: 3px;
+    border: 1px solid lightgrey;
+    padding: 5px 10px;
+}
+
+.description-textarea {
+    height: 285px;
+}
+
+.application-textarea {
+    height: 100px;
+}
+
+.resume-link {
+    display: block;
+    padding: 5px 10px;
+    width: 100%;
+    border-radius: 3px;
+    border: 1px solid lightgrey;
+}
+.custom {
+    margin-top: 10px;
+}
+
+input:focus, textarea:focus {
+    outline-color: cornflowerblue;
+}
+
+.modal-buttons button, .modal-buttons div  {
+    position: relative;
+    padding: 5px 20px;
+    border-radius: 5px;
+    border: none;
+    color: white;
+    /*text-transform: uppercase;*/
+    font-weight: 500;
+    margin-top: 15px;
+    cursor: pointer
+}
+
+.modal-buttons .submit-btn {
+    background: #06367a;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.modal-buttons .submit-btn:hover {
+    background-color: #2e579b;
+}
+
+.modal-buttons .cancel-btn {
+    color: #858B96;
+    background-color: #F0F0F0;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+.modal-buttons .cancel-btn:hover {
+    background-color: #e0e0e0;
+    color: #555;
+}
+
+.category-option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+/* DELETE MODAL */
+
+.modal-delete-buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 25px;
+}
+
+.modal-delete-content {
+    padding: 20px 25px;
+}
+
+.modal-delete-content-inside {
+    display: flex;
+    align-items: center;
+}
+
+.modal-delete-text {
+    padding-left: 35px;
+
+}
+
+.modal-delete-text p {
+    margin: 0;
+}
+
+
+.modal-delete-buttons .cancel-btn, .modal-delete-buttons .delete-btn {
+    display: inline;
+    border: none;
+    padding: 5px 25px 5px 25px;
+    border-radius: 7px;
+}
+
+.modal-delete-buttons .delete-btn {
+    background-color: red;
+    color: white;
+}
+
+.x-icon {
+    transform: scale(3.3) !important;
+    color: #D93936 !important;
+    padding: 0 15px !important;
+    /*margin-top: 20px !important;*/
+}
+
+.ql-snow .ql-picker.ql-font {
+    display: none;
+}
+.ql-toolbar.ql-snow .ql-picker-options {
+    background-color: white;
+}
+.ql-snow .ql-tooltip {
+    transform: translateX(100px) !important;
+}
+
+
+
+
+
Index: jobvista-frontend/src/views/static/Header.css
===================================================================
--- jobvista-frontend/src/views/static/Header.css	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/views/static/Header.css	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -6,4 +6,5 @@
     background-size: contain;
     margin-right: 0;
+
 }
 
@@ -18,11 +19,14 @@
 
 .navbar {
+    width: calc(100% - 17px);
     height: 80px;
-    background-color: #535C91;
+    background-color: #f8f9fa;
     font-family: Poppins, sans-serif;
+    position: fixed;
+    z-index: 10;
+    box-sizing: border-box;
 }
 
 .navbar .nav-item {
-
     color: rgba(1,38,90,0.9);
     margin-right: 15px;
@@ -31,5 +35,4 @@
     font-size: 20px;
     font-weight: 600;
-    //font-family: 'Ubuntu', sans-serif;
     font-family: Poppins, sans-serif;
 }
@@ -37,5 +40,4 @@
     color: white;
     background-color: rgba(1,38,90,0.9);
-    /*border-bottom: 3px solid rgba(1,38,90,0.9);*/
 }
 .active {
@@ -44,29 +46,157 @@
 }
 
-.user {
-
-}
-
-.auth-box {
-    display: inline-block;
-    margin-right: 35px;
-    margin-left: 5px;
-    //height: 50px;
-
-}
-
-.user {
+/*NOVO*/
+
+:root {
+    --gray: #555;
+    --purple: #4e65ff;
+    --green-blue: #92effd;
+    --white: #fff;
+}
+
+.navigation {
+    position: fixed;
+    top: 10px;
+    right: 20px;
+    width: 120px;
+    height: 60px;
+    display: flex;
+    justify-content: space-between;
+    border-radius: 5px;
+    background: var(--white);
+    box-shadow: 0 25px 35px rgba(0, 0, 0, 0.3);
+    /*box-shadow: 0px 0px 18px 4px rgba(0,0,0,0.46);*/
+    overflow: hidden;
+    transition: height 0.5s, width 0.5s;
+    transition-delay: 0s, 0.3s;
+    z-index: 15;
+    /*border: 2px solid var(--gray);*/
+}
+
+.navigation .user-box {
+    position: relative;
+    width: 60px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    transition: 0.3s;
+    transition-delay: 0.3s;
+}
+
+.navigation .user-box .username {
+    font-size: 1.2rem;
+     font-weight: bold;
+    white-space: nowrap;
+    margin: 0;
     color: black;
     padding-top: 10px;
-    margin-bottom: 0;
-
-}
-
-.role {
+
+}
+
+.navigation .user-box .role {
     color: darkgray;
     margin-bottom: 10px;
-    font-size: 15px;
-
-}
-
-
+    font-size: 1rem;
+}
+
+.navigation .user-box .image-box {
+    position: relative;
+    min-width: 60px;
+    height: 60px;
+    background: var(--white);
+    border-radius: 50%;
+    overflow: hidden;
+    border: 10px solid var(--white);
+
+}
+
+.navigation .user-box .image-box img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    /*border: 1px solid black*/
+}
+
+.navigation .menu-toggle {
+    position: relative;
+    width: 60px;
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.navigation .menu-toggle::before {
+    content: "";
+    position: absolute;
+    width: 32px;
+    height: 2px;
+    background: var(--gray);
+    transform: translateY(-10px);
+    box-shadow: 0 10px var(--gray);
+    transition: 0.5s;
+}
+
+.navigation .menu-toggle::after {
+    content: "";
+    position: absolute;
+    width: 32px;
+    height: 2px;
+    background: var(--gray);
+    transform: translateY(10px);
+    transition: 0.5s;
+}
+
+.menu {
+    position: absolute;
+    width: 100%;
+    /*height: calc(100% - 60px);*/
+    margin-top: 60px;
+    padding: 0;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.menu .menu-link {
+    text-decoration: none;
+    color: black;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 1.1rem;
+    padding: 15px 30px;
+}
+.menu .menu-link:hover {
+    background-color: #EEEEEE;
+}
+
+
+.navigation.active .menu-toggle::before {
+    transform: translateY(0px) rotate(45deg);
+    box-shadow: none;
+}
+
+.navigation.active .menu-toggle::after {
+    transform: translateY(0px) rotate(-45deg);
+}
+
+.navigation.active {
+    width: 300px;
+    height: 175px;
+    transition: width 0.3s, height 0.3s;
+    transition-delay: 0s, 0.3s;
+}
+
+.navigation.active .user-box {
+    width: calc(100% - 60px);
+    transition-delay: 0s;
+}
+
+
+
+
+
Index: jobvista-frontend/src/views/static/Header.js
===================================================================
--- jobvista-frontend/src/views/static/Header.js	(revision b2488107b82c95e4bdfdfd18b76b44f023786601)
+++ jobvista-frontend/src/views/static/Header.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -1,5 +1,5 @@
 import {Link, NavLink} from "react-router-dom";
 import "./Header.css"
-import { jwtDecode } from "jwt-decode";
+import {jwtDecode} from "jwt-decode";
 import {useDispatch, useSelector} from 'react-redux';
 import {useEffect, useState} from "react";
@@ -8,4 +8,6 @@
 import {useNavigate} from "react-router";
 import {AUTH_TOKEN} from "../../axios/axiosInstance";
+import {JobSeekerActions} from "../../redux/actions/JobSeekerActions";
+import {RecruiterActions} from "../../redux/actions/recruiterActions";
 
 export const Header = (props) => {
@@ -17,15 +19,28 @@
     const [role, setRole] = useState("");
     const [username, setUsername] = useState("");
+    const [user, setUser] = useState("");
 
-    const [user, setUser] = useState("");
+    const [profilePics, setProfilePics] = useState({});
+    let profilePicState = useSelector(state => state.images.profilePictures);
+    const [profilePicDispatched, setProfilePicDispatched] = useState(false);
+
+    const [logos, setLogos] = useState({});
+    let logoState = useSelector(state => state.images.logos);
+    const [logoDispatched, setLogoDispatched] = useState(false);
 
     const signOut = () => {
         dispatch(AuthActions.signOut());
         window.location = "/";
+        //navigator("/")
     }
+    const [isActive, setIsActive] = useState(false);
+
+    const toggleMenu = () => {
+        setIsActive(!isActive);
+    };
 
     useEffect(() => {
         const token = localStorage.getItem(AUTH_TOKEN);
-        if (token!=null) {
+        if (token != null) {
             try {
                 const decodedToken = jwtDecode(token);
@@ -34,4 +49,5 @@
                     role: decodedToken.role,
                     hasAccess: decodedToken.hasAccess,
+                    id: decodedToken.id
                 });
             } catch (error) {
@@ -45,4 +61,22 @@
             setRole(auth.role);
             setUsername(auth.name);
+
+            console.log("ROLE: " + auth.role)
+
+            if (auth.role === Roles.JOBSEEKER) {
+                dispatch(JobSeekerActions.downloadProfilePic(auth.id, (success, reponse) => {
+                    if (success) {
+                        setProfilePics(prevState => ({...prevState, [auth.id]: reponse}))
+                        console.log(reponse)
+                    }
+                }))
+            } else if (auth.role === Roles.RECRUITER) {
+                dispatch(RecruiterActions.downloadLogo(auth.id, (success, reponse) => {
+                    if (success) {
+                        setLogos(prevState => ({...prevState, [auth.id]: reponse}))
+                        console.log(reponse)
+                    }
+                }))
+            }
         }
     }, [auth]);
@@ -51,52 +85,72 @@
         <nav className="navbar navbar-expand-lg bg-light">
             <div className="container-fluid">
-                <Link to="/" className="logo navbar-brand" />
-                <Link to="/" className="brand-name navbar-brand" />
-                <div className="collapse navbar-collapse" id="navbarSupportedContent">
+                <Link to="/" className="logo"/>
+                <Link to="/" className="brand-name"/>
+                <div className="navbar-collapse">
                     <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                         <NavLink to="/" className="nav-item nav-link">Home</NavLink>
-                        {role==Roles.JOBSEEKER &&
+                        {role == Roles.JOBSEEKER &&
                             <>
-                                <NavLink to="/my-applications" className="nav-item nav-link" >My Applications</NavLink>
-                                {/*<NavLink to="/favoritejobs" className="nav-item nav-link" >Saved</NavLink>*/}
-                            </>
-
-                        }
-                        {role==Roles.RECRUITER &&
-                            <>
-                                <NavLink to="/my-job-advertisements" className="nav-item nav-link" >My Advertisements</NavLink>
-                                {/*<NavLink to="/favoritejobs" className="nav-item nav-link" >Saved</NavLink>*/}
+                                <NavLink to="/my-applications" className="nav-item nav-link">My Applications</NavLink>
                             </>
                         }
-                        {role===Roles.ADMIN &&
+                        {role == Roles.RECRUITER &&
+                            <>
+                                <NavLink to="/job-management-hub" className="nav-item nav-link">Job Management Hub</NavLink>
+                            </>
+                        }
+                        {role === Roles.ADMIN &&
                             <>
                                 <NavLink to="/admin-panel" className="nav-item nav-link">Admin Panel</NavLink>
                             </>
+                        }
+                        <NavLink to="/about" className="nav-item nav-link">About Us</NavLink>
+                        {/*<NavLink to="/contact" className="nav-item nav-link">Support</NavLink>*/}
+                    </ul>
+                </div>
+                {(auth.role === Roles.RECRUITER || auth.role === Roles.ADMIN || auth.role === Roles.JOBSEEKER) ?
+                    <>
+                        <div className={`navigation ${isActive ? 'active' : ''}`}>
+                            <div className="user-box">
+                                <div className="image-box">
+                                    {user.role === Roles.JOBSEEKER && <img src={profilePicState[auth.id]} /> }
+                                    {user.role === Roles.RECRUITER && <img src={logoState[auth.id]} /> }
+                                    {user.role === Roles.ADMIN && <img src="/images/admin.jpg"/> }
+                                </div>
+                                <div className="auth-box">
+                                    <p className="username">{user.name}</p>
+                                    {user.role === Roles.RECRUITER && <p className="role">Recruiter</p>}
+                                    {user.role === Roles.JOBSEEKER && <p className="role">Job Seeker</p>}
+                                    {user.role === Roles.ADMIN && <p className="role">Admin</p>}
+                                </div>
 
-                        }
-                        <NavLink to="/about" className="nav-item nav-link">About</NavLink>
-                        <NavLink to="/contact" className="nav-item nav-link">Support</NavLink>
-                    </ul>
+                            </div>
+                            <div className="menu-toggle" onClick={toggleMenu}></div>
+                            <ul className="menu">
+                                {user.role == Roles.JOBSEEKER &&
+                                    <>
+                                        <Link to="/job-seeker/edit-profile" onClick={toggleMenu} className="menu-link">
+                                            <i className="fa-solid fa-pen-to-square"></i> Edit profile
+                                        </Link>
+                                    </>
+                                }
+                                {user.role == Roles.RECRUITER &&
+                                    <>
+                                        <Link to="/recruiter/edit-profile" onClick={toggleMenu} className="menu-link">
+                                            <i className="fa-solid fa-pen-to-square"></i> Edit profile
+                                        </Link>
+                                    </>
+                                }
 
-                    {auth ?
-                        <>
-                            <img src="/images/user.png" width="45" height="45"/>
-                            <div className="auth-box">
-                                <p className="user"><b>{user.name}</b></p>
-                                {user.role==Roles.RECRUITER && <p className="role">Recruiter</p>}
-                                {user.role==Roles.JOBSEEKER && <p className="role">Job Seeker</p>}
-                                {user.role==Roles.ADMIN && <p className="role">Admin</p>}
-                                {/*<p className="role">{user.role==Roles.RECRUITER ? "Recruiter" : "Job Seeker"}</p>*/}
-                            </div>
-
-
-                            <Link onClick={signOut} className="btn auth-secondary-btn">Log out</Link>
-                        </> :
-                        <>
-                            <Link to="/signin" className="btn auth-secondary-btn">Sign in</Link>
-                        </>
-                    }
-
-                </div>
+                                <Link onClick={signOut} className="menu-link">
+                                    <i className="fa-solid fa-right-from-bracket"></i> Log out
+                                </Link>
+                            </ul>
+                        </div>
+                    </> :
+                    <>
+                        <Link to="/signin" className="btn auth-secondary-btn">Sign in</Link>
+                    </>
+                }
             </div>
         </nav>
