diff --git a/src/components/Layout/Header.jsx b/src/components/Layout/Header.jsx
index ae380b24..dcaa306f 100644
--- a/src/components/Layout/Header.jsx
+++ b/src/components/Layout/Header.jsx
@@ -6,9 +6,8 @@ import {changeMaster} from "../../slices/localVariablesSlice";
 import useMaster from "../../hooks/masterHook/useMaster";
 import {useProfile} from "../../hooks/useProfile";
 import {useNavigate} from "react-router-dom";
-
-const Header = () =>
-{
+import Avatar from "../../components/common/Avatar";
+const Header = () =>{
   const {profile} = useProfile()
   const dispatch = useDispatch( changeMaster( "Job Role" ) )
   const {data, loading} = useMaster()
@@ -88,11 +87,9 @@ const Header = () =>
               data-bs-toggle="dropdown"
             >
               <div className="avatar avatar-online">
-                <img
-                  src="../assets/img/avatars/00.jpg"
-                  className="w-px-40 h-auto rounded-circle"
-                  alt="avatar-image"
-                  aria-label="Avatar Image"
+                <Avatar
+                  firstName={`${profile?.employeeInfo?.firstName}`}
+                  lastName={`${profile?.employeeInfo?.lastName}`}
                 />
               </div>
             </a>
@@ -106,11 +103,9 @@ const Header = () =>
                   <div className="d-flex">
                     <div className="flex-shrink-0 me-3">
                       <div className="avatar avatar-online">
-                        <img
-                          src="../assets/img/avatars/00.jpg"
-                          className="w-px-40 h-auto rounded-circle"
-                          alt="avatar-image"
-                          aria-label="Avatar Image"
+                        <Avatar
+                          firstName={`${profile?.employeeInfo?.firstName}`}
+                          lastName={`${profile?.employeeInfo?.lastName}`}
                         />
                       </div>
                     </div>