diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index 46bd2197..fd970c1a 100644
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@@ -200,7 +200,6 @@ const Dashboard = () => {
 
                 <div className="btn-group">
                   <button
-                    type="button"
                     className="btn btn-outline-primary btn-sm dropdown-toggle"
                     type="button"
                     data-bs-toggle="dropdown"
diff --git a/src/components/Employee/EmployeeNav.jsx b/src/components/Employee/EmployeeNav.jsx
index d55b5936..3eb70fbc 100644
--- a/src/components/Employee/EmployeeNav.jsx
+++ b/src/components/Employee/EmployeeNav.jsx
@@ -7,19 +7,19 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
         <ul className="nav nav-pills flex-column flex-sm-row mb-6">
           <li className="nav-item">
             <a
-              className={`nav-link ${activePill === "account" ? "active" : ""}`}
+              className={`nav-link py-1 px-2 small  ${activePill === "account" ? "active" : ""}`}
               href="#"
               onClick={(e) => {
                 e.preventDefault(); // Prevent page reload
                 onPillClick("account");
               }}
             >
-              <i className="bx bx-user bx-sm me-1_5"></i> Account
+              <i className="bx bx-user bx-sm me-1_5"></i> Documents
             </a>
           </li>
           <li className="nav-item">
             <a
-              className={`nav-link ${activePill === "attendance" ? "active" : ""}`}
+              className={`nav-link py-1 px-2 small ${activePill === "attendance" ? "active" : ""}`}
               href="#"
               onClick={(e) => {
                 e.preventDefault(); // Prevent page reload
@@ -31,7 +31,7 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
           </li>
           <li className="nav-item">
             <a
-              className={`nav-link ${activePill === "activities" ? "active" : ""}`}
+              className={`nav-link py-1 px-2 small ${activePill === "activities" ? "active" : ""}`}
               href="#"
               onClick={(e) => {
                 e.preventDefault(); // Prevent page reload
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>
diff --git a/src/components/common/Avatar.jsx b/src/components/common/Avatar.jsx
index 900c9403..537af159 100644
--- a/src/components/common/Avatar.jsx
+++ b/src/components/common/Avatar.jsx
@@ -1,6 +1,22 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+
+// A simple hash function to generate a deterministic value from the name
+function hashString(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+  }
+  return hash;
+}
 
 const Avatar = ({ firstName, lastName, size='sm' }) => {
+  // Combine firstName and lastName to create a unique string for hashing
+  const fullName = `${firstName} ${lastName}`;
+
+  const [bgClass, setBgClass] = useState("");
+
+  // Function to generate the avatar text
   function generateAvatarText(firstName, lastName) {
     if (!firstName) return "";
     if (!lastName || lastName.trim() === "") {
@@ -9,7 +25,8 @@ const Avatar = ({ firstName, lastName, size='sm' }) => {
     return `${firstName[0]}${lastName[0]}`.toUpperCase();
   }
 
-  function getRandomBootstrapBgClass() {
+  // Function to map the hash value to a Bootstrap background class
+  function getBgClassFromHash(hash) {
     const bgClasses = [
       "bg-primary",
       "bg-secondary",
@@ -21,21 +38,27 @@ const Avatar = ({ firstName, lastName, size='sm' }) => {
       "text-light",
     ];
 
-    const randomIndex = Math.floor(Math.random() * bgClasses.length);
-    return bgClasses[randomIndex];
+    // Use the hash value to pick a background color from the array
+    const index = Math.abs(hash % bgClasses.length);
+    return bgClasses[index];
   }
+
+  useEffect(() => {
+    // Generate the hash from the full name and map it to a background class
+    const hash = hashString(fullName);
+    setBgClass(getBgClassFromHash(hash));
+  }, [fullName]); // Re-run if the fullName changes
+
   return (
-    <>
-      <div className="avatar-wrapper p-1">
-        <div className={`avatar avatar-${size} me-2`}>
-          <span
-            className={`avatar-initial rounded-circle ${getRandomBootstrapBgClass()}`}
-          >
-            {generateAvatarText(firstName, lastName)}
-          </span>
-        </div>
+    <div className="avatar-wrapper p-1">
+      <div className={`avatar avatar-${size} me-2`}>
+        <span
+          className={`avatar-initial rounded-circle ${bgClass}`}
+        >
+          {generateAvatarText(firstName, lastName)}
+        </span>
       </div>
-    </>
+    </div>
   );
 };
 
diff --git a/src/pages/employee/EmployeeProfile.jsx b/src/pages/employee/EmployeeProfile.jsx
index a1e10df3..e53eeeb2 100644
--- a/src/pages/employee/EmployeeProfile.jsx
+++ b/src/pages/employee/EmployeeProfile.jsx
@@ -1,4 +1,4 @@
-import React,{useState,useEffect} from "react";
+import React, { useState, useEffect } from "react";
 import EmpProfile from "../../components/Employee/EmpProfile";
 import axios from "axios";
 import Breadcrumb from "../../components/common/Breadcrumb";
@@ -9,7 +9,8 @@ import { useEmployeeProfile, useEmployees, useEmployeesByProject } from "../../h
 import { useSelector } from "react-redux";
 import EmployeeRepository from "../../repositories/EmployeeRepository";
 import { ComingSoonPage } from "../Misc/ComingSoonPage";
-
+import { useNavigate } from "react-router-dom";
+import Avatar from "../../components/common/Avatar";
 const EmployeeProfile = () => {
  
   const projectID = useSelector((store)=>store.localVariables.projectId)
@@ -50,7 +51,7 @@ const EmployeeProfile = () => {
     }
   }, [employeeId]);
 
-
+  const navigate = useNavigate();
   const renderContent = () => {
     if (loading) return <div>Loading</div>;
     switch (activePill) {
@@ -102,74 +103,81 @@ const EmployeeProfile = () => {
         ]}
       ></Breadcrumb>
 
-   <div className="row">
-      <div className="col-12 col-md-8 col-lg-4 order-1 order-lg-1">
-        <div className="row">
-          <div className="col-12 mb-4">
-            <div className="card">
-              <div className="card-body">
-                <div className="d-flex flex-row flex-lg-column">
-                  <div className="d-flex flex-column justify-content-center align-items-center text-center">
-                    <img
-                      src={`../../../public/img/avatars/${currentEmployee.gender}.jpg`}
-                      alt="user-avatar"
-                      className="d-block rounded"
-                      height="100"
-                      width="100"
-                      aria-label="Account image"
-                      id="uploadedAvatar"
-                    />
-                    <div className="py-2">
-                      <p className="h6">{`${currentEmployee?.firstName} ${currentEmployee?.lastName}`}</p>
+      <div className="row">
+        <div className="col-12 col-md-8 col-lg-4 order-1 order-lg-1">
+          <div className="row">
+            <div className="col-12 mb-4">
+              <div className="card">
+                <div className="card-body">
+                  <div className="d-flex flex-row flex-lg-column">
+                    <div className="d-flex flex-column justify-content-center align-items-center text-center">
+                      <Avatar
+                        firstName={`${currentEmployee?.firstName}`}
+                        lastName={`${currentEmployee?.lastName}`}
+                        size={"lg"}
+                      />
+                      <div className="py-2">
+                        <p className="h6">{`${currentEmployee?.firstName} ${currentEmployee?.lastName}`}</p>
+                      </div>
                     </div>
-                    <hr className="my-2" />
-                  </div>
-                  <div className="w-100 d-flex flex-row flex-sm-column justify-content-sm-start justify-content-around">
-                    <div className="text-wrap">
-                      <small className="card-text text-uppercase text-muted small">Contacts</small>
-                      <ul className="list-unstyled my-3 py-1">
-                       
-                        <li className="d-flex align-items-center mb-4">
-                          <i className="bx bx-phone"></i>
-                          <span className="fw-medium mx-2">Contact Number:</span>
-                          <span className={`${currentEmployee?.emergencyPhoneNumber ? "" : "text-muted"}`}>
-                            {currentEmployee?.emergencyPhoneNumber || <em>NA</em>}
-                          </span>
-                        </li>
-                        <li className="d-flex align-items-center mb-4 text-start">
-                          <i className="bx bx-envelope"></i>
-                          <span className="fw-medium mx-2">Email:</span>
-                          <span className={`text-break text-wrap ${currentEmployee?.email ? "" : "text-muted"}`}>
-                            {currentEmployee?.email || <em className="muted">NA</em>}
-                          </span>
-                          </li>
-                          <li className="d-flex align-items-center mb-4">
-                          <i className="bx bx-user"></i>
-                          <span className="fw-medium mx-2">Contact Person:</span>
-                          <span className="">
-                            {currentEmployee?.emergencyContactPerson}
-                          </span>
-                        </li>
-                        <li className="d-flex align-items-center  text-wrap ">
-                        <i className="bx bx-flag"></i>
-                         <span className="fw-medium mx-2">Address:</span>
-                         
-                        </li>
-                        <li className="d-flex align-items-start test-start mb-2">
-                          <span className={`${currentEmployee?.permanentAddress ? "" : "ms-4"}`}>
-                          {currentEmployee?.permanentAddress}
-                          </span>
-                        </li>
-                       
-                      </ul>
+                    <div className="w-100 d-flex flex-column justify-content-start">
+                      <div className="mt-3 w-100">
+                        <h6 className="mb-2 text-muted text-start">Employee Info</h6>
+                        <table className="table table-borderless mb-3">
+                          <tbody>
+                            <tr>
+                              <td className="fw-medium text-start">Email:</td>
+                              <td className="text-start">{currentEmployee?.email || <em>NA</em>}</td>
+                            </tr>
+                            <tr>
+                              <td className="fw-medium text-start">Phone Number:</td>
+                              <td className="text-start">{currentEmployee?.phoneNumber || <em>NA</em>}</td>
+                            </tr>
+                            <tr>
+                              <td className="fw-medium text-start">Emergency Contact Person:</td>
+                              <td className="text-start">{currentEmployee?.emergencyContactPerson || <em>NA</em>}</td>
+                            </tr>
+                            <tr>
+                              <td className="fw-medium text-start">Emergency Contact Number:</td>
+                              <td className="text-start">{currentEmployee?.emergencyPhoneNumber || <em>NA</em>}</td>
+                            </tr>
+
+                            <tr>
+                              <td className="fw-medium text-start">Gender:</td>
+                              <td className="text-start">{currentEmployee?.gender || <em>NA</em>}</td>
+                            </tr>
+                            <tr>
+                              <td className="fw-medium text-start">Birth Date:</td>
+                              <td className="text-start">{currentEmployee?.birthDate ? new Date(currentEmployee.birthDate).toLocaleDateString() : <em>NA</em>}</td>
+                            </tr>
+
+
+                            <tr>
+                              <td className="fw-medium text-start">Joining Date:</td>
+                              <td className="text-start">{currentEmployee?.joiningDate ? new Date(currentEmployee.joiningDate).toLocaleDateString() : <em>NA</em>}</td>
+                            </tr>
+                            <tr>
+                              <td className="fw-medium text-start">Job Role:</td>
+                              <td className="text-start">{currentEmployee?.jobRole || <em>NA</em>}</td>
+                            </tr>
+                            <tr>
+                              <td className="fw-medium text-start">Address:</td>
+                              <td className="text-start">{currentEmployee?.currentAddress || <em>NA</em>}</td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                      <button className="btn btn-primary btn-block" onClick={() => navigate(`/employee/manage/${currentEmployee?.id}`)}>
+                        Edit Profile
+                      </button>
                     </div>
                   </div>
                 </div>
+
               </div>
             </div>
           </div>
         </div>
-      </div>
 
       <div className="col-12 col-lg-8 order-2 order-lg-2 mb-4">
         <div className="row">