diff --git a/src/pages/employee/EmployeeProfile.jsx b/src/pages/employee/EmployeeProfile.jsx
index a1e10df3..62c8b25a 100644
--- a/src/pages/employee/EmployeeProfile.jsx
+++ b/src/pages/employee/EmployeeProfile.jsx
@@ -9,7 +9,7 @@ import { useEmployeeProfile, useEmployees, useEmployeesByProject } from "../../h
 import { useSelector } from "react-redux";
 import EmployeeRepository from "../../repositories/EmployeeRepository";
 import { ComingSoonPage } from "../Misc/ComingSoonPage";
-
+import Avatar from "../../components/common/Avatar";
 const EmployeeProfile = () => {
  
   const projectID = useSelector((store)=>store.localVariables.projectId)
@@ -102,74 +102,66 @@ 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="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>
-                    <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>
-                  </div>
-                </div>
+  <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}`}
+      />
+      <div className="py-2">
+        <p className="h6">{`${currentEmployee?.firstName} ${currentEmployee?.lastName}`}</p>
+      </div>
+      <hr className="my-2" />
+    </div>
+
+    <div className="w-100 d-flex flex-column justify-content-start">
+      <div className="d-flex justify-content-between align-items-center mb-3">
+        <small className="card-text text-uppercase text-muted small mb-0">Contacts</small>
+        <a href="javascript:;" class="btn btn-icon item-edit"><i class="bx bx-edit bx-sm"></i></a>
+      </div>
+
+      <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>{currentEmployee?.emergencyContactPerson}</span>
+        </li>
+        <li className="d-flex align-items-center mb-4">
+          <i className="bx bx-flag"></i>
+          <span className="fw-medium mx-2">Address:</span>
+          <span className={`${currentEmployee?.currentAddress ? "" : "text-muted"}`}>
+            {currentEmployee?.currentAddress || <em>NA</em>}
+          </span>
+        </li>
+      </ul>
+    </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">