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>
